CSS : trucs et astuces partie 2

Comment customiser par exemple les composants <Radio Bouton> et <Check Box> en CSS ?

Dans un premier temps, prenons 2 fichiers <image> : le premier (fich1.png) pour les composants qui ne sont pas <DISABLED> et le deuxième (fich2.png) pour les composants qui sont <DISABLED> :



Pour une meilleure "visibilité" IHM nous vous conseillons d'affecter à chaque composant la même largeur et la même hauteur (dans notre exemple 19px * 19px).

Considérons maintenant la partie CSS

input[type="radio"] {
display: none;
}

input[type="radio"]+label {
color: black;
font-family: Tahoma;
font-size: 10px;
}

input[type="radio"]+label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(fich1.png) -38px top no-repeat;
cursor: pointer;
}

input[type="radio"]:checked+label span {
background: url(fich1.png) -57px top no-repeat;
}

input[type="radio"]:disabled:checked+label span {
background: url(fich2.png) -57px top no-repeat;
}

input[type="radio"]:disabled:not               (:checked               )
+label span {
background: url(fich2.png) -38px top no-repeat;
}

input[type="checkbox"] {
display: none;
}

input[type="checkbox"]+label {
color: black;
font-family: Tahoma;
font-size: 10px;
}

input[type="checkbox"]+label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(fich1.png) 0px top no-repeat;
cursor: pointer;
}

input[type="checkbox"]:checked+label span {
background: url(fich1.png) -19px top no-repeat;
}

input[type="checkbox"]:disabled:checked+label span {
background: url(fich2.png) -19px top no-repeat;
}

input[type="checkbox"]:disabled:not  (:checked ) +label span {
background: url(fich2.png) 0px top no-repeat;
}

Vous noterez comment nous nous positionnons sur chaque <image> (nous partons de la gauche vers la droite en utilisant un offset négatif ou à zéro).

Nous utilisons une balise <Label> pour gérer "proprement" le texte du composant.

Comment utiliser ces composants customisés ?

<Radio Bouton> :

<input id='rd1' name='rd' value='1' type='radio' checked='checked'><label for='rd1'><span>text de mon radio button 1</span></label>

<input id='rd2' name='rd' value='2' type='radio'><label for='rd2'><span>text de mon radio button 2</span></label>

<Check Box> :

<input id='ck1' value='100' type='checkbox' checked='checked' onclick='ma_fonction();'><label for='ck1' title='mon titre'><span>mon texte</span></label>