Styliser ses checkbox en CSS … proprement
La mauvaise façon de personnaliser ses checkboxs
Personnaliser ses checkboxs n’a rien de bien compliqué, une petite recherche Google et le tour et joué … oui mais les tutos présentent le plus souvent un hack bien connu mais pas franchement au top. En effet bien souvent la technique consiste à faire disparaître la case à cocher ( position :absolute; left:-5000px; ). Bref la technique fonctionne mais ce genre de manipulation est à mon sens dangereux (risque de faire disparaître la checkbox à l’utilisateur) et inutile !
Personnaliser ses checkboxs en CSS 3
Voici une facçon un peu plus moderne afin de faire de belles checkbox. De mon point de vu le mieux est de rester assez proche du rendu standard afin de ne pas perturber vos utilisateurs. Et oui l’expérience utilisateur c’est important !
Commençons tout d’abord par ne pas afficher le style par défaut du navigateur :
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
}
Ensuite il suffit d’appliquer son propre style à la case à cocher :
input[type=checkbox] {
-border-radius: 4px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #ccc;
}
…. et quand la case est cochée
input[type="checkbox"]:checked {
background: yellow;
margin:0px;
position: relative;
&:before {
font-family: FontAwesome;
content: '\f00c';
display: block;
color: grey;
font-size: 13px;
position: absolute;
}
}
Evidemment le code ci-dessus est à adapter à vos besoins et à votre goût.
Enjoy !
