Comment styliser une case à cocher en utilisant CSS

Question

Je essaie de styler une case à cocher en utilisant le code suivant :

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

Answer 1

MISE À JOUR:

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

Voici quelques liens utiles:

• Créer des cases à cocher personnalisées avec juste du CSS
• Générateur de cases à cocher CSS facile
• Des trucs que vous pouvez faire avec le hack de la case à cocher
• Mise en œuvre de cases à cocher personnalisées et de boutons radio avec CSS3
• Comment styliser une case à cocher avec CSS

Il convient de noter que le problème fondamental n'a pas changé. Vous ne pouvez toujours pas appliquer des styles (bordures, etc.) directement à l'élément de case à cocher et avoir ces styles affecter l'affichage de la case à cocher HTML. Ce qui a changé, cependant, c'est qu'il est maintenant possible de masquer la case à cocher réelle et de la remplacer par un élément stylisé de votre choix, en n'utilisant que du CSS. En particulier, parce que CSS a maintenant un sélecteur largement pris en charge :checked, vous pouvez faire en sorte que votre remplacement reflète correctement le statut coché de la case.

---

ANCIENNE RÉPONSE

Voici un article utile sur le style des cases à cocher. Fondamentalement, l'auteur a constaté que cela varie énormément d'un navigateur à l'autre, et que de nombreux navigateurs affichent toujours la case à cocher par défaut, peu importe comment vous la stylisez. Il n'y a donc pas vraiment de solution facile.

On peut facilement imaginer une solution de contournement où vous utiliseriez JavaScript pour superposer une image sur la case à cocher et faire en sorte que les clics sur cette image cochent réellement la case à cocher. Les utilisateurs sans JavaScript verraient la case à cocher par défaut.

Edité pour ajouter: voici un bon script qui fait cela pour vous; il masque l'élément de case à cocher réel, le remplace par un span stylisé et redirige les événements de clic.

Answer 2

Vous pouvez obtenir un effet de case à cocher personnalisé assez cool en utilisant les nouvelles capacités fournies par les pseudo-classes :after et :before. L'avantage de cela est que vous n'avez pas besoin d'ajouter quoi que ce soit de plus au DOM, juste la case à cocher standard.

Remarque : cela fonctionnera uniquement pour les navigateurs compatibles. Je crois que cela est lié au fait que certains navigateurs ne permettent pas de définir les pseudo-classes :after et :before sur les éléments d'entrée. Cela signifie malheureusement que, pour le moment, seuls les navigateurs WebKit sont pris en charge. Firefox + Internet Explorer permettront toujours aux cases à cocher de fonctionner, simplement sans style, et cela changera espérons-le à l'avenir (le code n'utilise pas de préfixes de vendeur).

Il s'agit d'une solution pour les navigateurs WebKit uniquement (Chrome, Safari, navigateurs mobiles)

Voir l'exemple sur Fiddle

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Classes principales */
.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;
}

/* Grandes cases à cocher */
.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;
}

/* Case à cocher personnalisée */
.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%);
}

    Normal :

    Petit :

    Grand :

    Icône personnalisée :

Fiddle de style flipswitch WebKit Bonus

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

corps {
  police de caractères : arial;
}

.flipswitch {
  position : relative;
  fond : blanc;
  largeur : 120px;
  hauteur : 40px;
  -webkit-appearance : initial;
  border-radius : 3px;
  -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
  contour : aucun;
  taille de la police : 14px;
  police de caractères : Trebuchet, Arial, sans-serif;
  poids de la police : gras;
  curseur : pointer;
  bordure : 1px solide #ddd;
}

.flipswitch:after {
  position : absolute;
  haut : 5%;
  display : block;
  line-height : 32px;
  largeur : 45%;
  hauteur : 90%;
  fond : #fff;
  box-sizing : border-box;
  text-align : center;
  transition : tout 0.3s facilité 0s;
  couleur : noir;
  bordure : #888 1px solide;
  border-radius : 3px;
}

.flipswitch:after {
  gauche : 2%;
  contenu : "OFF";
}

.flipswitch:checked:after {
  gauche : 53%;
  contenu : "ON";
}

Case à cocher / flipswitch de style mobile amical pour WebKit

Answer 3

Il existe un moyen de faire cela en utilisant uniquement du CSS. Nous pouvons (ab)user de l'élément label et styliser cet élément à la place. L'inconvénient 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 my styled "checkbox"

Answer 4

Vous pouvez styliser les cases à cocher avec un petit tour de passe-passe en utilisant l'élément label comme dans l'exemple 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;
}

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

Answer 5

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

(Ci-dessous se trouve une image statique pour que vous puissiez visualiser le résultat; consultez le JSFiddle pour une version interactive.)

Tout comme d'autres solutions, cela utilise l'élément label. Un span adjacent contient notre caractère de case à cocher.

span.bigcheck-target {
  font-family: FontAwesome; /* Utilise une police d'icônes pour la case à cocher */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Masquer la vraie case à cocher */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* Dans FontAwesome, c'est un carré ouvert (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* Case à cocher cochée dans FontAwesome (fa-check-square-o) */
}

/* ==== Optionnel - couleurs et marge pour un rendu agréable === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Réglez ceci à la taille souhaitée */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

    Fromage

Voici le JSFiddle correspondant.