Dans la plupart des cas, le design par défaut des boutons radio ne correspond pas au style de votre site web. Heureusement, avec un peu de CSS, vous pouvez personnaliser l’apparence de ces boutons pour qu’ils s’intègrent mieux à votre design. Voici comment vous pouvez faire:
HTML:
```
CSS:
```
/* Cacher le bouton radio par défaut */
input[type=“radio”] {
display: none;
}
/* Créer un nouveau bouton radio */
input[type=“radio”] + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
input[type=“radio”] + label:before {
content: “”;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #000;
}
/* Style quand le bouton est sélectionné */
input[type=“radio”]:checked + label:before {
background-color: #000;
}
```
Dans ce code, nous commençons par cacher les boutons radio par défaut avec ‘display: none’. Ensuite, nous utilisons l’opérateur ‘+’ en CSS pour sélectionner tous les labels qui sont immédiatement après un input de type ‘radio’. Cela va nous permettre de styliser et de construire notre nouveau bouton radio.
Nous utilisons ‘:before’ pour créer un pseudo-élément que nous allons utiliser pour notre nouveau bouton. Ici, nous définissons sa forme, sa taille, sa couleur, etc.
Enfin, nous utilisons ‘:checked’ pour styliser le bouton quand il est sélectionné par l’utilisateur. Dans cet exemple, nous changeons simplement la couleur de fond du bouton, mais vous pouvez le personnaliser comme vous voulez.
Un autre point à noter est que nous avons utilisé ‘for’ dans nos labels et ‘id’ dans nos inputs. Cela permet de lier le label à l’input correspondant, donc lorsque vous cliquez sur le label, cela active aussi le bouton radio. C’est une pratique recommandée pour améliorer l’accessibilité de votre site web.
