Issue
I want to add a style to a radio button's selected label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Any ideas what I'm doing wrong?
Solution
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
First of all, you probably want to add the name
attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.
Also, since I placed the labels as siblings (of the radio buttons), I had to use the id
and for
attributes to associate them together.
Answered By - Šime Vidas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.