web-dev-qa-db-fra.com

Créer des CSS pour agrandir les cases à cocher

J'essaie de doubler la taille de mes cases à cocher sur quelques pages. Comment puis-je y arriver en CSS? Je ne veux pas dénommer le vol stationnaire.

Des idées?

csscss3resizelabelcheckbox
22
codeChris

Vous pouvez toujours utiliser la case à cocher pour créer votre propre case à cocher. Cela permet une solution beaucoup plus compatible avec tous les navigateurs.

J'ai fait une démo rapide ici , évidemment, vous devez obtenir un fichier .png transparent, pas celui que j'ai obtenu.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}


input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}
<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

10
Andy

Pour doubler la taille des cases à cocher, vous pouvez utiliser la propriété scale CSS. Le (2,2) signifie 2 fois la largeur et 2 fois la hauteur de l'original, mais ce sera assez volumineux. 

input[type="checkbox"] {
  transform:scale(2, 2);
}

Vous pouvez également utiliser des valeurs décimales, pour des cases à cocher légèrement plus grandes.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }
36
stwp

Le style des cases à cocher est une affaire risquée. C'est l'une de ces choses qui ne semble jamais fonctionner de manière cohérente avec tous les navigateurs.

ou vous pouvez essayer avec 

 style="zoom:1.2"

jQuery propose un plugin pour remplacer les cases à cocher

9
Rahul Tripathi

Cela marche. Il utilise des tailles relatives afin qu'il s'adapte à votre taille de police actuelle.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

Cependant, vous devrez peut-être ajuster vos marges.

5
Chloe

Je pense que le mieux que vous puissiez faire est de lui donner une taille de police plus grande. À partir de là, le navigateur peut le gérer, à moins que vous ne créiez un élément fictif qui contrôle une case à cocher masquée. Cela n'augmente pas tellement.

input[type="checkbox"] {
  font-size: 50px;
}
3
Kurt Emch

Ajoutez simplement une image de fond à la case à cocher. Et ajustez les tailles comme vous préférez.

Le code ci-dessous ajoute automatiquement un arrière-plan quand c'est coché, et la taille reste la même avec le statut non coché.

Pas besoin de spécifier comme:

input[type=checkbox]:checked

ou

input[type=checkbox]:checked ~ div label

Pour ex, toutes les cases à cocher:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

Voir le violon ici .

0
aldrien.h

J'ai utilisé cette bibliothèque avec succès

http://plugins.krajee.com/checkbox-x

Il nécessite jQuery et bootstrap 3.x

Téléchargez le zip ici: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Placez le contenu du zip dans un dossier de votre projet

Pop les libs nécessaires dans votre en-tête

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

Ajoutez les contrôles de données à l'élément en utilisant data-size = "xl" pour modifier la taille, comme indiqué ici http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

Il existe de nombreuses autres fonctionnalités si vous naviguez sur le site du plugin.

0
DropHit

Le style des cases à cocher est un monde très étrange qui regorge de problèmes de navigateur. Plus d'informations peuvent être trouvées ici http://www.456bereastreet.com/lab/form_controls/checkboxes/ Vous pouvez également créer le vôtre avec du javascript, mais ce n'est pas génial pour l'accessibilité de l'utilisateur. 

Je voudrais donc éviter de changer si possible.

0
Dominic Green