Maxime Millet

Changer l'apparence des boutons radios uniquement avec du CSS

15/12/2012 | Commentaires fermés |

Exemple de boutons radiosAvec le CSS, c'est cool, on peut tout customiser... eh bien non, c'est faux ! du moins pour certains élements on ne peut pas directement modifier leur apparence sans passer par la ruse. C'est le cas des boutons radios (ou inputs radios) et après avoir fais plusieurs recherches sur comment les personnaliser je dois vous avouer que je n'ai rien trouvé de bien concret c'est pour quoi j'ai décidé de partager avec vous la solution que j'ai trouvé et qui n'utilise pas de scripts tiers.

Démo disponible ici

Pour commencer, ma solution n'est surement pas compatible avec les anciens navigateurs et tant pis, il faut plutôt inviter l'utilisateur à se mettre à jour plutôt que de faire des hacks spécialement pour eux. Cependant elle ne devrait pas rendre vos boutons radios infonctionnels.

Le code HTML

Pour l'HTML je n'ai qu'une chose à vous dire, comme je l'ai dis en intro il n'est pas possible de changer l'apparence de ces inputs directement, vous devrez obligatoirement leur donner un label même si celui-ci reste vide.

<input type="radio" name="genre" value="homme" id="genre_femme">
<label for="genre_femme">Une femme</label>
<input type="radio" name="genre" value="femme" id="genre_homme">
<label for="genre_homme">Un homme</label>
<input type="radio" name="genre" value="dieu" id="genre_dieu" disabled>
<label for="genre_dieu">Un dieu</label>
<input type="radio" name="genre" value="robot" id="genre_robot">
<label for="genre_robot">Un robot</label>

Maintenant que nous avons notre code html, nous allons attaquer le CSS dont je vais vous proposer deux façons de faire, la première où vos boutons seront des images et la seconde où vos boutons seront 100% CSS.

Le CSS

Parmis les nouveautés du css3 se trouvent les selecteurs :not() et :checked qui permettent d'intergargir sur l'élement en fonction de son état. Ces propriétés étant nouvelles, elles ne se pas reconnues par les anciens navigateurs donc notre customisation ne fonctionnera pas. Nous devons tout d'abord désactiver le style par défaut de l'input.

input[type="radio"]:not(:checked),input[type="radio"]:checked{display:none;}

Il faut maintenant associer le input avec le label en utilisant input[type="radio"]+label .

Des boutons radios avec des images

Il vous faut au moins 3 images pour: l'état décoché, l'état coché, l'état désactivé et une quatrième éventuellement pour rendre plus design qui correspond à l'état hover.

input[type="radio"] + label /* quand le bouton est décoché */
{
display:block;
background-image:url(decoche.png);
background-repeat:no-repeat;
min-width:16px;
padding-left:20px;
min-height:16px;
}
    Ce code est tout con, voici deux petites explications :
  • min-width et min-height doivent correspondre à la taille de votre image.
  • padding-left permet de décaler le texte vers la gauche afin que notre image ne soit pas recouverte, il faut mettre la taille de la longueur de votre image plus une marge.
input[type="radio"] + label:hover /* faculfatif mais plus sympa */
{
background-image:url(hover.png);
}
input[type="radio"]:checked + label /* quand le bouton est coché */
{
background-image:url(coche.png);
}
input[type="radio"]:disabled + label /* quand le bouton est désactivé */
{
background-image:url(media/images/boutons-radios/desactive.png);}

Remarque : on aurait aussi pu utiliser des sprites afin d'avoir qu'un seul fichier.

Des boutons radios 100% CSS

Le principe est le même sauf qu'on va maintenant utiliser le selecteur :before.

input[type="radio"]+label
{
display:block;
margin:2px;/* c'est plus aéré avec une marge !*/
}
input[type="radio"]+label:before
{
content:"";/* pour que le bouton soit visible*/
display:inline-block;
width:1em;
height:1em;
background-color:#000;
border:2px solid #C60;
border-radius:55px;
}
input[type="radio"]+label:hover:before /*Bouton hover*/
{
background-color:#F60;
}
input[type="radio"]:checked+label:before/*Bouton coché*/
{
background-color:#FC0;
}
input[type="radio"]:disabled+label:before/*Bouton désactivé*/
{
background-color:#999;
border:2px solid #333;
}

Voilà ! On aurait pu faire mieux parce que là c'est pas très joli avec les nouvelles propriétés du css3 comme les dégradés, les transitions, les ombres...

Commentaires





Remarque : Votre commentaire sera visible après validation par le webmaster.