Radiokey group checked css error property
I made tabs using a radio button trick like this
Html
<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
</div>
then css:
.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}
.tabs input[type=radio]:checked ~ .tabs label {
background: #fff;
border-bottom: 1px solid #fff;
}
The problem is that the style of the label doesn't change when the radio button is selected. Can anyone help me explain this, thanks
btw: I am running the code using IE 8. Does it support checked properties
+3
Tran Duy Linh
source
to share
3 answers
Check the next solution. Replace ~
with +
.
.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}
input[type="radio"]:checked + label {
background: #fff;
border-bottom: 1px solid #fff;
}
<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1"/>
<label for="tab-2">Tab Two</label>
</div>
+3
ketan
source
to share
Remove the sign tilde (~)
and replace with +
and.tabs
.tabs input[type=radio]:checked + label {
+1
Conrad Lotz
source
to share
You can also do jQuery approach:
$('.tabs input[type="radio"]').click(function() {
if($('#tab-1').is(':checked')) {
$('#tab-1').addClass("someClass")
}
});
0
Friendly crook
source
to share