web-dev-qa-db-fra.com

Comment styliser une case à cocher en utilisant CSS

J'essaie de styler une case à cocher en utilisant les éléments suivants:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Mais le style n'est pas appliqué. La case à cocher affiche toujours son style par défaut. Comment puis-je lui donner le style spécifié?

htmlcsscheckbox
772
svirk

MISE À JOUR:

La réponse ci-dessous fait référence à l'état d'avant la disponibilité généralisée de CSS 3. Dans les navigateurs modernes (y compris Internet Explorer 9 et versions ultérieures), il est plus simple de créer des remplacements de cases à cocher avec votre style préféré, sans utiliser JavaScript.

Voici quelques liens utiles:

Il convient de noter que la question fondamentale n’a pas changé. Vous ne pouvez toujours pas appliquer de styles (bordures, etc.) directement à l'élément de case à cocher et que ces styles affectent l'affichage de la case à cocher HTML. Cependant, ce qui a changé, c’est qu’il est maintenant possible de masquer la case à cocher et de la remplacer par un élément stylé de votre choix, en n’utilisant que du CSS. En particulier, CSS ayant à présent un sélecteur :checked largement pris en charge, vous pouvez faire en sorte que votre remplacement reflète correctement le statut coché de la case.

RÉPONSE ANCIENNE

Voici n article utile sur les cases à cocher de style . En gros, cet auteur a constaté que cela variait énormément d'un navigateur à l'autre et que de nombreux navigateurs affichaient toujours la case à cocher par défaut, quelle que soit la manière dont vous la styliez. Donc, il n'y a vraiment pas de moyen facile.

Il n’est pas difficile d’imaginer une solution de contournement dans laquelle vous utiliseriez JavaScript pour superposer une image sur la case à cocher et cliquer sur cette image pour cocher la case à cocher réelle. Les utilisateurs sans JavaScript verraient la case à cocher par défaut.

Édité pour ajouter: voici n joli script qui le fait pour vous ; il masque l'élément de case à cocher réel, le remplace par une étendue de style et redirige les événements de clic.

741
Jacob Mattison

Il existe un moyen de faire cela en utilisant simplement CSS. Nous pouvons (ab) utiliser l’élément label et le styler à la place. La mise en garde est que cela ne fonctionnera pas pour Internet Explorer 8 et les versions inférieures.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>
135
Blake Pettersson

Vous pouvez obtenir un effet de case à cocher personnalisé assez cool en utilisant les nouvelles capacités fournies avec les pseudo-classes :after et :before. L'avantage, c'est qu'il n'est pas nécessaire d'ajouter quoi que ce soit au DOM, mais uniquement à la case à cocher standard.

Notez que cela ne fonctionnera que pour les navigateurs compatibles. Je pense que cela est lié au fait que certains navigateurs ne vous autorisent pas à définir :after et :before sur les éléments en entrée. Malheureusement, pour le moment, seuls les navigateurs WebKit sont supportés. Firefox + Internet Explorer autorisera toujours les cases à cocher à fonctionner, mais sans style, et cela devrait changer à l'avenir (le code n'utilise pas de préfixes de fournisseur).

Ceci est une solution de navigateur WebKit uniquement (navigateurs Chrome, Safari, Mobile)

voir exemple violon

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});
/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Bonus de violon à cliquetis de style Webkit 

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});
body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>
128
Josh Mc

Avant de commencer (à partir de janvier 2015)

La question et la réponse d'origine ont maintenant environ 5 ans. En tant que tel, c'est un peu une mise à jour.

Premièrement, il existe un certain nombre d'approches en matière de style des cases à cocher. le principe de base est:

  1. Vous devrez masquer le contrôle de case à cocher par défaut qui est stylé par votre navigateur et ne peut pas être remplacé de manière significative à l'aide de CSS.

  2. Avec le contrôle caché, vous aurez toujours besoin de pouvoir détecter et basculer son état vérifié

  3. L’état coché de la case à cocher devra être reflété par le style d’un nouvel élément

La solution (en principe)

Ce qui précède peut être accompli de différentes manières - et vous entendrez souvent que l'utilisation de pseudo-éléments CSS3 est la bonne solution. En fait, il n'y a pas vraiment de bonne ou de mauvaise façon de procéder, cela dépend de l'approche la mieux adaptée au contexte dans lequel vous allez l'utiliser. Cela dit, j'ai une préférence.

  1. Enveloppez votre case à cocher dans un élément label. Cela signifie que même lorsqu'il est masqué, vous pouvez toujours basculer l'état activé en cliquant n'importe où dans l'étiquette.

  2. Cachez votre case à cocher

  3. Ajoutez un nouvel élément après la case à cocher que vous styliserez en conséquence. Il doit apparaître après la case à cocher pour pouvoir être sélectionné à l'aide de CSS et mis en forme en fonction de l'état :checked. CSS ne peut pas sélectionner 'à l'envers'.

La solution (en code)

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}
<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Raffinement (en utilisant des icônes)

Mais salut! Je vous entends crier. Et si je voulais montrer une jolie tique ou une croix dans la case? Et je ne veux pas utiliser d'images d'arrière-plan!

C'est ici que les pseudo-éléments de CSS3 peuvent entrer en jeu. Ceux-ci supportent la propriété content qui vous permet d'injecter icônes Unicode représentant l'un ou l'autre état. Vous pouvez également utiliser une source d'icône de police tierce telle que font awesome (assurez-vous également de définir le font-family correspondant, par exemple à FontAwesome).

label input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}
<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>
124
SW4

Je suivrais les conseils de réponse de SW4 - pour masquer la case à cocher et la recouvrir d'une étendue personnalisée, suggérant ce code HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

Le wrap in label permet parfaitement de cliquer sur le texte sans avoir besoin de lier l'attribut "for-id". cependant,

Ne le cachez pas avec visibility: hidden ou display: none

Cela fonctionne en cliquant ou en tapotant, mais c’est une mauvaise façon d’utiliser les cases à cocher. Certaines personnes utilisent encore beaucoup plus efficace Tab déplacer le focus, Space pour l'activer, et se cacher avec cette méthode le désactive. Si la forme est longue, on sauvera les poignets de quelqu'un d'utiliser les attributs tabindex ou accesskey. Et si vous observez le comportement de la case à cocher du système, il y a une ombre décente en survol. La case à cocher bien stylée doit suivre ce comportement.

La réponse de cobberboy recommande Font Awesome qui est généralement préférable à bitmap car les polices sont des vecteurs scalables. En travaillant avec le code HTML ci-dessus, je suggérerais ces règles CSS:

  1. Masquer les cases à cocher

    input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

    J'utilise simplement z-index négatif car mon exemple utilise un skin assez large pour le recouvrir complètement. Je ne recommande pas left: -999px car il n'est pas réutilisable dans toutes les présentations. La réponse de Bushan wagh fournit un moyen sûr de le cacher et de convaincre le navigateur d’utiliser Tabindex. C’est donc une bonne alternative. Quoi qu'il en soit, les deux ne sont qu'un hack. La bonne façon aujourd'hui est appearance: none, voir réponse de Joost :

    input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

  2. Style de la case à cocher

    input[type="checkbox"] + span {
  font: 16pt sans-serif;
  color: #000;
}

  3. Ajouter un skin de case à cocher

    input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: '\00f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

    \00f096 est le square-o de Font Awesome, le rembourrage est ajusté pour fournir un contour même en pointillé lors de la mise au point (voir ci-dessous).

  4. Ajouter une case cochée peau

    input[type="checkbox"]:checked + span:before {
  content: '\00f046';
}

    \00f046 est le check-square-o de Font Awesome, dont la largeur est différente de celle de square-o, qui est la raison du style de largeur ci-dessus.

  5. Ajouter un contour de focus

    input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}

    Safari ne fournit pas cette fonctionnalité (voir le commentaire de @Jason Sankey), vous devez utiliser window.navigator pour détecter le navigateur et le ignorer s'il s'agit de Safari.

  6. Définir la couleur grise pour la case à cocher désactivée

    input[type="checkbox"]:disabled + span {
  color: #999;
}

  7. Définir une ombre de survol sur la case à cocher non désactivée

    input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}

violon de démonstration

Essayez de survoler les cases à cocher avec la souris et utilisez Tab et Shift+Tab se déplacer et Space pour basculer.

31
Jan Turoň

Vous pouvez styliser les cases à cocher avec un peu de ruse en utilisant l’élément label, un exemple en est donné ci-dessous:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}
<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

Et un FIDDLE pour le code ci-dessus. Notez que certains CSS ne fonctionnent pas dans les anciennes versions de navigateurs, mais je suis sûr qu'il existe des exemples JavaScript sophistiqués!

29
Jake

Solution simple à mettre en œuvre et facilement personnalisable

Après de nombreuses recherches et tests, j'ai eu cette solution simple à implémenter et à personnaliser. Dans cette solution :

  1. Vous n'avez pas besoin de bibliothèques et de fichiers externes
  2. Vous n'avez pas besoin d'ajouter de HTML supplémentaire dans votre page.
  3. Vous n'avez pas besoin de changer les noms et les identifiants des cases à cocher

Mettez simplement le CSS qui coule en haut de votre page et tous les styles de cases à cocher vont changer comme ceci:

Enter image description here

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}
24
Mohamed Nor

Vous pouvez éviter d'ajouter des balises supplémentaires. Cela fonctionne partout sauf IE pour le bureau (mais fonctionne dans IE pour Windows Phone et Microsoft Edge) via le paramètre CSS appearance:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}
<input type="checkbox" />
18
Vadim Ovchinnikov

Je préfère utiliser les polices d'icônes (telles que FontAwesome) car il est facile de modifier leurs couleurs avec CSS et qu'elles s'adaptent parfaitement aux appareils à haute densité de pixels. Voici donc une autre variante CSS pure utilisant des techniques similaires à celles décrites ci-dessus.

(Ci-dessous, une image statique vous permettant de visualiser le résultat; voir le JSFiddle pour une version interactive.)

Checkbox example

Comme avec d'autres solutions, il utilise l'élément label. Un span adjacent contient notre caractère de case à cocher.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look Nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Voici le JSFiddle pour cela.

16
cobberboy

Récemment, j'ai trouvé une solution assez intéressante au problème.

Vous pouvez utiliser appearance: none; pour désactiver le style par défaut de la case à cocher, puis écrire le vôtre par-dessus comme décrit ici (Exemple 4) .

Exemple de violon

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}
<input type="checkbox">

Malheureusement, le support du navigateur est assez mauvais pour l'option appearance. D'après mes tests personnels, Opera et Chrome ne fonctionnent correctement. Mais ce serait la voie à suivre pour rester simple quand un meilleur support vient ou que vous voulez seulement utiliser Chrome/Opera.

lien "Puis-je utiliser?"

12
Joost

Ma solution

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
6
agirault

De mon googling, c'est le moyen le plus simple pour le style de case à cocher. Ajoutez simplement :after et :checked:after CSS en fonction de votre conception.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>
6
Mahfuzur Rahman

Avec du CSS pur, rien d’extraordinaire avec :before et :after, sans transformation, vous pouvez désactiver l’apparence par défaut, puis l’apparaître avec une image d’arrière-plan intégrée, comme dans l’exemple suivant. Cela fonctionne dans Chrome, Firefox, Safari et maintenant Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>
6
Volomike

Voici une solution CSS simple, sans code jQuery ou JavaScript.

J'utilise les icônes FontAwseome mais vous pouvez utiliser n'importe quelle image.

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}
6
aWebDeveloper

Beurk! Toutes ces solutions de contournement m'ont amené à la conclusion que la case à cocher HTML est un peu moche si vous voulez la styler.

En guise d'avertissement, ce n'est pas une implémentation CSS. Je pensais juste que je partagerais la solution que j'ai proposée au cas où quelqu'un d'autre le trouverait utile.

J'ai utilisé l'élément HTML5 canvas.

L'avantage, c'est que vous n'avez pas à utiliser d'images externes et que vous pouvez probablement économiser de la bande passante.

L'inconvénient est que si, pour une raison quelconque, un navigateur ne peut pas le restituer correctement, il n'y a pas de solution de secours. Bien que cela reste un problème en 2017 est discutable.

Mise à jour

J'ai trouvé le vieux code assez moche, alors j'ai décidé de le réécrire.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Voici un démo de travail .

La nouvelle version utilise des prototypes et un héritage différentiel pour créer un système efficace de création de cases à cocher. Pour créer une case à cocher:

var my_checkbox = Checkbox.create();

Ceci ajoutera immédiatement la case à cocher au DOM et reliera les événements. Pour demander si une case à cocher est cochée:

my_checkbox.is_checked(); // True if checked, else false

Il est également important de noter que je me suis débarrassé de la boucle.

Mise à jour 2

Quelque chose que j'ai négligé de mentionner dans la dernière mise à jour est que l'utilisation de la zone de dessin présente plus d'avantages que la simple création d'une case à cocher qui ressemble à celle que vous souhaitez. Vous pouvez également créer des cases à cocher multi-états , si vous le souhaitez.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

J'ai légèrement modifié le Checkbox utilisé dans le dernier extrait pour qu'il soit plus générique, ce qui permet de le "prolonger" avec une case à cocher à 3 états. Voici ne démo . Comme vous pouvez le constater, il a déjà plus de fonctionnalités que la case à cocher intégrée.

Quelque chose à considérer lorsque vous choisissez entre JavaScript et CSS.

Vieux code mal conçu

Démo de travail

Tout d'abord, mettre en place une toile

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Ensuite, imaginez un moyen de mettre à jour le canevas.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

La dernière partie est de le rendre interactif. Heureusement, c'est assez simple:

canvas.onclick = function(){
  checked = !checked;
}

C'est là que vous pourriez avoir des problèmes dans IE, en raison de leur modèle de gestion des événements bizarre en JavaScript.

J'espère que ça aidera quelqu'un; cela répondait parfaitement à mes besoins.

4
Braden Best

Je pense que la façon la plus simple de le faire est de styler un label et de rendre le checkbox invisible.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

La checkbox, même si elle est masquée, sera toujours accessible et sa valeur sera envoyée lors de la soumission d'un formulaire. Pour les anciens navigateurs, vous devrez peut-être changer la classe de label pour cocher en utilisant JavaScript car je ne pense pas que les anciennes versions d'Internet Explorer comprennent ::checked sur checkbox.

4
Jonathan Hodgson

Un modèle simple et léger aussi:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/

4
javad shariaty

Modifiez le style des cases à cocher avec CSS3, sans aucune manipulation JS & HTML.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form class="form">
  <input type="checkbox" />
</form>
3
BEJGAM SHIVA PRASAD

Aucun JavaScript ou jQuery requis .

Changez votre style de case à cocher de manière simple.

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

Voici le lien JsFiddle: https://jsfiddle.net/05y2bge3/

3
Cherish

C'est la manière la plus simple et vous pouvez choisir les cases à cocher pour donner ce style.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>
2
Ali Gonabadi

Voici une version uniquement en CSS/HTML, aucun jQuery ou JavaScript nécessaire, HTML simple et propre et CSS très simple et court.

Voici le JSFiddle

http://jsfiddle.net/v71kn3pr/

Voici le HTML:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

Voici le CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

Ceci peut être adapté pour pouvoir avoir une radio individuelle ou des cases à cocher, des groupes de cases à cocher et des groupes de boutons radio.

Ce html/css vous permettra également de capturer le clic sur l'étiquette, ainsi la case à cocher sera cochée et décochée même si vous ne cliquez que sur l'étiquette.

Ce type de case à cocher/bouton radio fonctionne parfaitement avec n’importe quel formulaire, aucun problème. Ont été testés avec PHP, ASP.NET (.aspx), JavaServer Faces , et ColdFusion aussi.

2
Allan

Avertissement: Ce qui suit était vrai au moment de la rédaction, mais entre-temps, les choses ont progressé.

Les navigateurs modernes AFAIK affichent les cases à cocher à l'aide du contrôle de système d'exploitation natif, il n'y a donc aucun moyen de les styliser.

1
Joril

Non, vous ne pouvez toujours pas nommer la case à cocher elle-même, mais j'ai (enfin) compris comment styliser une illusion tout en en conservant la fonctionnalité consistant à cliquer sur une case à cocher . Cela signifie que vous pouvez le basculer même si le curseur n'est pas parfaitement immobile sans risquer de sélectionner du texte ou de déclencher le glisser-déposer!

Cette solution convient probablement aussi aux boutons radio.

Ce qui suit fonctionne dans Internet Explorer 9, Firefox 30.0 et Chrome 40.0.2214.91 et n’est qu’un exemple élémentaire. Vous pouvez toujours l'utiliser en combinaison avec des images d'arrière-plan et des pseudo-éléments.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
1
LGT

Étant donné que les navigateurs comme Edge et Firefox ne prennent pas en charge: avant: après les balises d'entrée des cases à cocher, voici une alternative uniquement avec HTML et CSS. Bien sûr, vous devriez éditer CSS en fonction de vos besoins.

Faire le HTML pour la case à cocher comme ceci:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Appliquez ce style à la case à cocher pour changer l'étiquette de couleur

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>
1
Muhammad Usman

Il semble que vous puissiez modifier la couleur de la case à cocher en niveaux de gris en utilisant uniquement CSS.

Ce qui suit convertit les cases à cocher du noir au gris (ce qui correspond à ce que je voulais):

input[type="checkbox"] {
    opacity: .5;
}
1
Ellis
input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}
1
Bhushan wagh

Vous pouvez simplement utiliser appearance: none sur les navigateurs modernes, afin qu'il n'y ait pas de style par défaut et que tous vos styles soient appliqués correctement:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}
0
collimarco