Clever Geek Handbook

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


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>
Run codeHide result


+3


source


Remove the sign tilde (~)

and replace with +

and.tabs 



.tabs input[type=radio]:checked + label {
+1


source


You can also do jQuery approach:

$('.tabs input[type="radio"]').click(function() {

   if($('#tab-1').is(':checked')) { 
       $('#tab-1').addClass("someClass")
   }

});
0


source






More articles:


All Articles