CODEWITHSUNDEEP
htmlcssradio-button
radiax
radiax

Reputation: 27

Styling radion button labels individually

Is it possible to style radio button labels individually?

<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>

I'm trying to style labels but I can't change any classes, ids, or even the HTML code. But input fields have ids and labels have for=" " elements. Im looking for a selector logic something like:

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

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

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

Is this something css can do?

Upvotes: 0

Views: 33

Answers (2)

j08691
j08691

Reputation: 208032

You could select the labels in a variety of ways. For example use the various IDs of the inputs and then add the adjacent sibling selector. E.g. #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>

Upvotes: 1

Derek Wang
Derek Wang

Reputation: 10204

This can be done using nth-of-type selector.

.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>

Upvotes: 2

Related Questions