Styliser les groupes de boutons radio

Petite expériemntation CSS sur la manière de styliser un groupe de boutons radio.

Exemple de rendu de groupes de boutons radio.
<!-- radio-group simple « et/ou » -->
<p class="radio-group">
    <input type="radio" name="and-or" id="and" value="or">
    <label for="and">et</label>
    <input type="radio" name="and-or" id="or" value="and">
    <label for="or">ou</label>
</p>
Exemple de code HTML
.radio-group {
    position: relative;
    /* hack to deal with white space and inline-block */
    font-size: 0;
    margin: 0 0 15px;
    /* or when it's ready */
    /* white-space-collapse: discard; */
}
.radio-group label {
    /* typo */
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    text-align:center;
    cursor: pointer;
    /* box */
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    height: 14px;
    padding: 5px 10px;
    /* XXX margin-left depending on radio width */
    margin: 0 0 0 -14px;
    /* colors */
    border-color: rgba(0,0,0,0.2);
    color: #ccc;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:         linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
}
.radio-group li:first-child > label,
.radio-group > label:first-of-type {
    -webkit-border-radius: 10px 0 0 10px;
       -moz-border-radius: 10px 0 0 10px;
        -ms-border-radius: 10px 0 0 10px;
         -o-border-radius: 10px 0 0 10px;
            border-radius: 10px 0 0 10px;
}
.radio-group li:last-child > label,
.radio-group > label:last-of-type {
    -webkit-border-radius: 0 10px 10px 0;
       -moz-border-radius: 0 10px 10px 0;
        -ms-border-radius: 0 10px 10px 0;
         -o-border-radius: 0 10px 10px 0;
            border-radius: 0 10px 10px 0;
}
.radio-group label:hover {
    color: #666;
}
.radio-group input {
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
}
.radio-group input:checked + label {
    background-color: #c0c0c0;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
    background-image:         linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
    color: #111;
}
ul.radio-group {
    padding-left: 0;
}
.radio-group li {
    display: inline-block;
    list-style: none;
}
Code CSS.
  • Tester sous Firefox 13, Internet Explorer 9, Opera 12, Web 3.4.1, Chrome.
  • Internet Explorer 9 ne comprend pas les gradients et se contente d'appliquer la couleur de fond.
  • La gestion des espaces blancs peut être compliquée.
  • On peut aussi placer les boutons radio dans une liste à puces.

L'unique contrainte HTML est de positionner le label après l'élément input de type « radio ». Le fait de devoir préciser l'attribut « for » sur les label n'est pas une contrainte ; il s'agit simplement d'écrire correctement du HTML.