{"id":3518,"date":"2013-06-27T11:15:45","date_gmt":"2013-06-27T09:15:45","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3518"},"modified":"2023-09-20T12:13:22","modified_gmt":"2023-09-20T10:13:22","slug":"personnaliser-aspect-boutons-radio-checkbox-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/personnaliser-aspect-boutons-radio-checkbox-css","title":{"rendered":"Personnaliser l’aspect de boutons radio et checkbox en CSS"},"content":{"rendered":"\n

Ces derniers temps je passe un peu de temps sur la recherche autour des \u00e9l\u00e9ments de formulaire. Vous savez certainement que historiquement il n’est pas toujours possible de personnaliser l’aspect de contr\u00f4les de formulaire pour des raisons d’accessibilit\u00e9 (m’a-t-on dit). Cependant il est vrai que l’apparence tr\u00e8s variable de ces \u00e9l\u00e9ments est sujet \u00e0 controverse. Et ce n’est pas un mal.<\/p>\n\n\n\n\n\n\n\n

Les codes et styles CSS que je vais vous proposer ici utilisent le niveau 3 de CSS, par cons\u00e9quent les vieux navigateurs ne sont pas concern\u00e9s.
Cependant nous t\u00e2cherons de travailler nos styles (notamment les s\u00e9lecteurs CSS) pour faire en sorte que ces vieilleries continuent \u00e0 afficher les contr\u00f4les classiques (nos bons vieux boutons radio et cases \u00e0 cocher).<\/p>\n\n\n\n

Pourquoi styler les checkbox et bouton radio avec CSS ?<\/h2>\n\n\n\n

Pour harmoniser les styles entre les navigateurs, bien s\u00fbr, mais \u00e9galement pour rendre (peut-\u00eatre) plus affordants certains contr\u00f4les, dans un contexte bien pr\u00e9cis. Pour am\u00e9liorer l’accessibilit\u00e9 dans un contexte \u00ab\u00a0touch\u00a0\u00bb. Les zones touchable pour les checkboxes et boutons radio sont bien trop souvent trop petites.<\/p>\n\n\n\n

De m\u00eame, le contraste de couleurs est par d\u00e9faut tr\u00e8s pauvre sur Mac, par exemple. Je ne comprends m\u00eame pas comment ils peuvent \u00eatre si mal design\u00e9.<\/p>\n\n\n\n

Peut-\u00eatre que votre propre objectif est diff\u00e9rent, donc je ne vais pas m’attarder davantage sur les raisons, et sauter aux solutions techniques.<\/p>\n\n\n\n

Modifier l\u00e9g\u00e8rement l’aspect des checkboxes<\/h2>\n\n\n\n

Avec cet exemple, nous allons poser la base de notre CSS, cela me permettra de vous expliquer pr\u00e9cis\u00e9ment les s\u00e9lecteurs utilis\u00e9s.
Voici ce que je souhaite obtenir.<\/p>\n\n\n

\n
\"\"
Non styl\u00e9es (gauche) VS styl\u00e9es (droite)<\/figcaption><\/figure>\n<\/div>\n\n\n

Voir la d\u00e9monstration<\/a><\/p>\n\n\n\n

HTML – Quelques bases<\/h3>\n\n\n\n

Mais commen\u00e7ons par notre code HTML, que je vais proposer uniquement sous forme de quelques paragraphes avec un label<\/code> et un input<\/code> dans chacun d’eux.<\/p>\n\n\n

\n\t
<p id="label">Do you like?<\/p><p>\t<input type="checkbox" id="test1" \/>\t<label for="test1" aria-describedby="label">Red<\/label><\/p><p>\t<input type="checkbox" id="test2" checked="checked" \/>\t<label for="test2" aria-describedby="label">Green<\/label><\/p><p>\t<input type="checkbox" id="test3" disabled \/>\t<label for="test3" aria-describedby="label">Blue<\/label><\/p><p>\t<input type="checkbox" id="test4"  checked="checked" disabled \/>\t<label for="test4" aria-describedby="label">White<\/label><\/p><\/code><\/pre> 
 <\/div> <\/div><\/div>\n\n\n\n
Ce code propose dans l’ordre une checkbox classique, une coch\u00e9e, une d\u00e9sactiv\u00e9e, et une d\u00e9sactiv\u00e9e coch\u00e9e.<\/p>\n\n\n\n
Gardez en t\u00eate l’importance des attributs ID<\/code> et FOR<\/code>. Vous devez relier le label et la checkbox ensemble gr\u00e2ce \u00e0 ces attributes, en leur donnant la m\u00eame valeur. C’est obligatoire pour des raisons d’accessibility, mais aussi pour que le code qui suit fonctionne.<\/p>\n\n\n\n
Le code CSS pour ces checkboxes personnalis\u00e9es<\/h3>\n\n\n\n
Dans l’absolu, l’\u00e9l\u00e9ment input:checkbox<\/code> n’est pas stylable. Nous allons donc jouer sur les styles du label<\/code>, notamment ses deux pseudo-\u00e9l\u00e9ments que nous allons cr\u00e9er et manipuler.<\/p>\n\n\n
\n\t
 
form p {\t\/* permet de positionner la checkbox *\/\tposition: relative;}[type="checkbox"]:not(:checked), [type="checkbox"]:checked {\t\/* Cache la checkbox sans\t   la rendre invisible aux\t   lecteurs d'\u00e9cran *\/\tposition: absolute;\tleft: 0;\topacity: 0.01;}\/* Preparer le label *\/[type="checkbox"]:not(:checked)   label,[type="checkbox"]:checked   label {\tposition: relative; \/* permet de positionner la checkbox *\/\tpadding-left: 2.3em; \/* place pour la box *\/\tfont-size: 1.05em;\tline-height: 1.7;\tcursor: pointer; }<\/code><\/pre> 
 La version r\u00e9tro-compatible<\/span> <\/div> <\/div><\/div>\n\n\n\n
C’est dans ce d\u00e9but que r\u00e9side l’astuce du \u00ab\u00a0j’affiche du personnalis\u00e9 pour les navigateurs r\u00e9cents, et du classique pour les navigateurs plus vieux\u00a0\u00bb. Si vous n’avez pas besoin du support navigateur pour IE 11, vous pouvez utiliser cette version :<\/p>\n\n\n
\n\t
 
form p {\tposition: relative;}[type="checkbox"] {\tposition: absolute;\tleft: 0;\topacity: 0.01;}[type="checkbox"]   label {\tposition: relative;\tpadding-left: 2.3em;\tfont-size: 1.05em;\tline-height: 1.7;\tcursor: pointer; }<\/code><\/pre> 
 Version plus simple<\/span> <\/div> <\/div><\/div>\n\n\n\n
Un peu d’explication du code : La premi\u00e8re d\u00e9claration permet de placer la checkbox sous la checkbox que nous allons cr\u00e9er visuallement tout en conservant sa lisibilit\u00e9 par les lecteurs d’\u00e9cran. La planquer visuellement sans utiliser de display:none;<\/code> qui lui casse la lisibilit\u00e9.<\/p>\n\n\n\n
La seconde d\u00e9claration permet de rendre le label plus \u00ab\u00a0affordant\u00a0\u00bb et de faire une petite place pour notre future checkbox.
La position relative<\/code> nous est utile pour positionner pr\u00e9cis\u00e9ment la checkbox \u00e0 venir (le label<\/code> devient r\u00e9f\u00e9rant).<\/p>\n\n\n\n
Ne cibler que les navigateurs r\u00e9cents<\/h4>\n\n\n\n
En effet, tous nos styles personnalis\u00e9s vont commencer par : [type=\"checkbox\"]:checked<\/code> ou [type=\"checkbox\"]:not(:checked)<\/code>, ce qui veut dire que si le navigateur ne reconnait pas le s\u00e9lecteur, ces styles ne seront pas appliqu\u00e9s. C’est une sorte de d\u00e9tection de support du navigateur \ud83d\ude42<\/p>\n\n\n\n
Si vous n’avez pas besoin du support IE 11, utilisez la seconde syntaxe fournie ci-dessus.<\/p>\n\n\n\n
Cr\u00e9ation des checkboxes<\/h3>\n\n\n\n
Maintenant nous allons visuellement la checkbox gr\u00e2ce aux pseudo-\u00e9l\u00e9ments :after<\/code> (on l’utilisera pour la coche en forme de croix) et :before<\/code> (on l’utilisera pour la case \u00e0 cocher).<\/p>\n\n\n
\n\t
 
\/* Aspect de la case *\/[type="checkbox"]:not(:checked)   label::before,[type="checkbox"]:checked   label::before {\tcontent: '';\tposition: absolute;\tleft: 0;\ttop: 0;\twidth: 1.4em;\theight: 1.4em;\tborder: 1px solid #aaa;\tbackground: #FFF;\tborder-radius: .2em;\tbox-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);\ttransition: all .275s;}\/* Aspect de la coche *\/[type="checkbox"]:not(:checked)   label::after,[type="checkbox"]:checked   label::after {\tcontent: '\u2715';\tspeak: never; \/* Pour \u00eatre s\u00fbr que le lecteur d'\u00e9cran ne lira pas "fois" *\/\tposition: absolute;\ttop: .38em;\tleft: .18em;\tfont-size: 1.6em;\tcolor: #CB22ED;\tline-height: 0;\ttransition: all .2s; \/* Petite transition *\/}\/* Aspect non coch\u00e9e *\/[type="checkbox"]:not(:checked)   label::after {\topacity: 0;\ttransform: scale(0) rotate(45deg);}\/* Aspect coch\u00e9e *\/[type="checkbox"]:checked   label::after {\topacity: 1;\ttransform: scale(1) rotate(0);}<\/code><\/pre> 
 La CSS pour les checkboxes personnalis\u00e9es<\/span> <\/div> <\/div><\/div>\n\n\n\n
La premi\u00e8re d\u00e9claration ici permet de r\u00e9gler la taille de la coche, sa position, sa couleur, etc.<\/p>\n\n\n\n
Les deux suivantes permettent de d\u00e9finir leur forme : non coch\u00e9e est transparent et r\u00e9duit, coch\u00e9e est opaque et \u00e0 l’\u00e9chelle. Ces valeurs vont subir une transition de 0 vers 1 (ou inversement), puisqu’on a pr\u00e9vu une animation avec la propri\u00e9t\u00e9 transition<\/code>.<\/p>\n\n\n\n
Styler les diff\u00e9rents \u00e9tats<\/h3>\n\n\n\n
Nos styles de base sont en place, maintenant si vous souhaitez r\u00e9gler les autres \u00e9tats (d\u00e9sactiv\u00e9e, d\u00e9sactiv\u00e9e et coch\u00e9e, qui a le focus) voici quelques proposition de style, principalement des modifications sur l’aspect focus ou de la coche (couleur, forme).<\/p>\n\n\n
\n\t
 
\/* Disabled checkbox *\/[type="checkbox"]:disabled:not(:checked)   label::before,[type="checkbox"]:disabled:checked   label::before {\tbox-shadow: none;\tborder-color: #bbb;\tbackground-color: #e9e9e9;}\/* Disabled checked *\/[type="checkbox"]:disabled:checked   label::after {\tcolor: #777;}[type="checkbox"]:disabled   label {\tcolor: #aaa;}\/* Accessibility focus *\/[type="checkbox"]:checked:focus   label::before,[type="checkbox"]:not(:checked):focus   label::before {\tbox-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(203, 34, 237, .2);}<\/code><\/pre> 
 <\/div> <\/div><\/div>\n\n\n\n
Voil\u00e0 pour quelques id\u00e9es de styles personnalis\u00e9s.<\/p>\n\n\n\n
N’oubliez pas de pr\u00e9fixer les propri\u00e9t\u00e9s CSS3 pour les navigateurs concern\u00e9s, si vous avez encore besoin de les supporter.<\/p>\n\n\n\n
Poussons le d\u00e9lire un peu plus loin – Styles avanc\u00e9s<\/h2>\n\n\n\n
Je ne vais pas faire le d\u00e9tail de cette d\u00e9monstration pour la simple et bonne raison que tout le principe reste le m\u00eame.
Il est possible ensuite de composer autant d’\u00e9l\u00e9ments visuels en ajoutant \u00e9ventuellement des \u00e9l\u00e9ments HTML dans le label (essayez de ne pas en abuser quand m\u00eame).
Voici donc ce qu’il est possible de faire avec un \u00e9l\u00e9ment suppl\u00e9mentaire dans le label.<\/p>\n\n\n
\n
\"checkbox-flat-ui\"<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Voir la d\u00e9monstration<\/a><\/p>\n\n\n\n
Ces deux exemples de styles personnalis\u00e9s utilisent l’unit\u00e9 em<\/code> pour le premier et pixel (px<\/code>) pour plus d’aisance \u00e0 leur compr\u00e9hension dans ce deuxi\u00e8me cas. Pour faire les choses correctement et de mani\u00e8re plus flexible, essayez d’utiliser l’unit\u00e9 em<\/code>, %<\/code> ou rem<\/code> suivant votre besoin et exp\u00e9rience.<\/p>\n\n\n\n
\u00c0 la recherche d’id\u00e9es<\/h2>\n\n\n\n
Une fois que j’avais r\u00e9ussi \u00e0 faire \u00e7a, tout content de moi je suis allez voir ce que font les copains.
Voici quelques id\u00e9es, plus graphiques que techniques, car la plupart des d\u00e9monstrations que j’ai vu ne sont pas accessibles.<\/p>\n\n\n
\n
\"Checkbox<\/figure>\n<\/div>\n\n\n

Checkboxes Anim\u00e9es<\/a><\/p>\n\n\n
\n
\"checkbox-lightsaber\"<\/figure>\n<\/div>\n\n\n

Checkboxes sabres laser<\/a><\/p>\n\n\n
\n
\"checkbox-styles\"<\/figure>\n<\/div>\n\n\n

Diverses checkboxes<\/a><\/p>\n\n\n\n
Et ceux qui ont bien compris le principe, j’imagine que vous comprenez aussi que l’on peut produire ce genre de styles avec des boutons radio<\/strong> ?<\/p>\n\n\n\n
Quelques articles pour aller plus loin<\/h2>\n\n\n\n
Si vous ne le saviez pas, vous pouvez \u00e9galement styler certains \u00e9l\u00e9ments de formulaire comme les  les input de type file, ou m\u00eame l’\u00e9l\u00e9ment progress en HTML5.<\/p>\n\n\n\n