Nicolas Guilhou

mer 22 août

Styler les checkboxes sans monoculture… ou presque

Comme vous l’avez sans doute remarqué, habiller des éléments de formulaire en CSS peut vite virer au cauchemar, même si on s’enlève une épine du pied en éliminant Internet Explorer.
On peut passer par des plugins JQuery ou autres, c’est bien mais pas top, surtout pour quelques malheureux éléments de formulaire.

Donc, stylons des checkbox. HTML, simple :

<div class="test">
  <p><input type="checkbox" checked name="yaka" value="" id="yaka"><label for="yaka">Activer les propulseurs supraluminiques</label></p>
  <p><input type="checkbox" name="yapuka" value="" id="yapuka"><label for="yapuka">Voir le hanneton glouton de Tron</label></p>
  <p><input type="checkbox" disabled name="ifokon" value="" id="ifokon"><label for="ifokon">Oui, mais en fait non</label></p>
</div>

Moi je suis un garçon bien élevé, je suis les règles, et comme des fois elles sont floues ben je me trompe. Par exemple, qui de Webkit et de Gecko a raison en autorisant/interdisant les pseudo éléments :before et :after sur les éléments de formulaires. Je ne sais ni. Je suis designer et ce que je constate c’est que Webkit les autorise, pas Gecko. Point. Mais vous pouvez m’éclairer dans les commentaires hein.
Donc on ne peut pas écrire input:before ou input:after pour Gecko. Ça le laisse de marbre.

Si on y réfléchit bien, les checkbox se baladent pas comme ça sur une page, elles sont souvent – que dis-je, toujours – accompagnées d’un label. Et puisque cette satanée checbox ne veut rien entendre sur Gecko ben je vais causer à son copain le label.

Discussion CSS intégrale :

.test input {
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
  display: none;
}

.test label {
  margin-left: 40px;
  position: relative;
}

.test p {
  height: 32px;
}

.test input:checked+label:before {
  background-color: hsl(119, 23%, 57%);
}

.test input:checked+label:after {
  left: -20px;
}

.test label:before {
  content: "";
  position: absolute;
  top: 0;
  left: -28px;
  display: block;
  width: 28px;
  height: 16px;
  background-color: #e6703a;
  border-radius: 10px;
  margin-top: 0;
  margin-left: -6px;
  border: 2px solid hsl(0, 0%, 77%);
  box-shadow: inset 0 1px 3px hsla(0, 0%, 26%, 0.65);
}

.test label:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 14px;
  background-color: #f5f5f5;
  box-shadow: 0 1px 5px #444;
  position: absolute;
  top: 2px;
  left: -32px;
  -webkit-transition: left .3s ease-in-out;
  -moz-transition: left .3s ease-in-out;
  -o-transition: left .3s ease-in-out;
  transition: left .3s ease-in-out;
}

.test input[disabled]+label:after {
  display: none;
}

.test input[disabled]+label:before {
  background-color: #fafaf8;
  box-shadow: inset 0 0 3px hsla(0, 0%, 26%, 0.65);
  opacity: .6;
}

Et on obtient ça, sur Gecko et Webkit :

En guise de conclusion, je dirai que c’est fastoche on prend pas en compte Internet Explorer, mais libre à vous d’essayer sur cette base moi j’ai pas ce navigateur sur ma machine et je veux pas devenir fou. Pour Opera ça presque marche, si les spécialistes veulent s’y coller et contribuer à cet article vous êtes les bienvenus.

Allez je vous laisse je vais peindre une girafe.

UPDATE : La même chose en live