Lors de la création de styles CSS pour les formulaires HTML, les développeurs sont souvent confrontés à l'impossibilité de modifier directement l'apparence des cases à cocher et des boutons radio. Voyons comment contourner cette limitation à l'aide des outils CSS3 et sans utiliser de code JavaScript.Donc, pour commencer, ajoutez quelques cases à cocher et commutateurs ordinaires au formulaire:/* */
<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>
<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>
<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>
/* */
<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>
<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>
<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>
Déplacez l'affichage standard des éléments au-delà de la portée et ajoutez des retraits aux étiquettes adjacentes:input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked)
{
position: absolute;
left: -9999px;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
display: inline-block;
position: relative;
padding-left: 28px;
line-height: 20px;
cursor: pointer;
}
Avant les étiquettes, ajoutez des conteneurs stylisés pour nos éléments personnalisés. Pour les drapeaux, ce seront des carrés avec des bords légèrement arrondis pour la beauté, et pour les interrupteurs, juste de petits cercles:input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid #dddddd;
background-color: #ffffff;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
border-radius: 2px;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
border-radius: 100%;
}
Ajoutez maintenant des indicateurs de sélection. Pour les drapeaux, ce seront des daws; pour les commutateurs, les petits cercles remplis de couleur seront plus petits que le conteneur lui-même. Pour un effet plus grand, nous avons également mis en place une petite animation:input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
content: "";
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
left: 3px;
top: 4px;
width: 10px;
height: 5px;
border-radius: 1px;
border-left: 4px solid #e145a3;
border-bottom: 4px solid #e145a3;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
left: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #e145a3;
}
Pour représenter le choucas, nous faisons pivoter un petit rectangle, dont les deux côtés sont peints en couleur, à 45 degrés dans le sens antihoraire.Notez que: avant et: après les sélecteurs vous permettent d'ajouter du contenu immédiatement avant et après le contenu de l'étiquette elle-même. Étant donné que pour les étiquettes, nous définissons un positionnement relatif (position: relative), nous pouvons définir un positionnement absolu contextuel pour leur contenu.Il reste à masquer les indicateurs de sélection lorsque l'élément n'est pas sélectionné, et, en conséquence, à les afficher lorsque l'élément est dans l'état sélectionné:input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
Nous ajoutons que la solution décrite ici fonctionne dans toutes les versions modernes des navigateurs Chrome, Firefox, Safari, Opera, et aussi, à partir de la version 9, et dans Internet Explorer.Les définitions CSS complètes peuvent être téléchargées ici .