Est-il possible de styliser les étiquettes des boutons radio individuellement?

<div class="radio-wrap">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</div>

J'essaie de styliser les étiquettes, mais je ne peux pas modifier les classes, les identifiants ou même le code HTML. Mais les champs d'entrée ont des identifiants et les étiquettes ont des éléments pour = "". Je recherche une logique de sélecteur quelque chose comme:

.radio-wrap [1st-label] {
  color: red;
}

.radio-wrap [2nd-label] {
  color: blue;
}

.radio-wrap [3rd-label] {
  color: black;
}

Est-ce quelque chose que le CSS peut faire?

0
radiax 30 oct. 2020 à 19:59

2 réponses

Meilleure réponse

Vous pouvez sélectionner les étiquettes de différentes manières. Par exemple, utilisez les différents ID des entrées, puis ajoutez le sélecteur de frère adjacent. Par exemple. #male + label

#male + label{
color: red;
}

#female + label{
color: blue;
}

#other + label{
color: black;
}
<div class="radio-wrap">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</div>
1
j08691 30 oct. 2020 à 17:03

Cela peut être fait en utilisant le sélecteur nth-of-type.

.radio-wrap label:nth-of-type(1) {
  color: red;
}

.radio-wrap label:nth-of-type(2) {
  color: blue;
}

.radio-wrap label:nth-of-type(3) {
  color: black;
}
<div class="radio-wrap">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</div>
2
Derek.W 30 oct. 2020 à 17:01