css

Styling radio buttons

Styling radio button labels based on the state and disabled without the need for class name or id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
input[type="radio"] + label {
  color: gray;
}

input[type="radio"][disabled="disabled"] + label {
  color: red;
}

input[type="radio"]:checked + label {
  color: green;
}
</style>

<input name="test" type="radio" value="1" id="a"><label for="a">AAAA</label>
<input name="test" type="radio" value="2" id="b" disabled="disabled"><label for="b">BBBB</label>
<input name="test" type="radio" value="3" id="c" checked="checked"><label for="c">CCCC</label>

Live example