Attention ! Cet article a plus de 1 an (2617 jours), ce qui signifie qu'il n'est pas forcément à jour !
Voici un petit "snippet" de code tout simple pour surligner le label d’un input checkbox.
Sur un de mes travail d’intégration je devais donner l’illusion que quelqu’un aurait fait un "highlight" sur le texte d’un label quand ce dernier est coché. Vous savez comme avec les crayons marqueur. Je ne voulais pas utiliser d’image pour créer l’effet, voici donc comment le faire en CSS.
<input id="c" type="checkbox" />
<label for="c">Ceci est un label de checkbox</label>
<br />
<input id="c1" type="checkbox" checked/>
<label for="c1">Ceci est un label de checkbox</label>
<br />
<input id="c2" type="checkbox" />
<label for="c2">Ceci est un label de checkbox</label>input + label{
padding:0 8px
}
input:checked + label{
background: #40A6F4;
color:white;
}Bon le résultat est proche de celui que je désirais avoir, mais il y a clairement moyen aussi de le pousser un peu plus pour avoir de quoi d’encore plus proche du vrai design du crayon marqueur.
See the Pen qZPEVM by René Domingue (@rdomingue) on CodePen.