Select sibling checkbox in CSS3 - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:element sibling

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. element sibling

Description

Select sibling checkbox in CSS3

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div {<!--from   w  ww .j a  v  a2  s . com-->
   position:relative;
   margin:21px 0 0 0;
}

input[type=radio] {
   display:none
}

div label {
   padding:0 0 0 26px;
}

label:before {
   border-radius:21px;
   background:blue;
   content:'';
   display:block;
   position:absolute;
   left:0;
   top:0;
   height:21px;
   width:21px;
   opacity:0.3
}

input[id=click-1]:checked~div label[for=click-1]:before {
   background:red!important;
}

input[id=click-2]:checked~div label[for=click-2]:before {
   background:black!important;
}

input[id=click-3]:checked~div label[for=click-3]:before {
   background:green!important;
}
</style> 
 </head> 
 <body> 
  <input id="click-1" type="radio" value="1" name="clickMe"> 
  <input id="click-2" type="radio" value="1" name="clickMe"> 
  <input id="click-3" type="radio" value="1" name="clickMe"> 
  <div> 
   <label for="click-1">Lorem ips</label> 
  </div> 
  <div> 
   <label for="click-2">Lorem ips</label> 
  </div> 
  <div> 
   <label for="click-3">Lorem ips</label> 
  </div>  
 </body>
</html>

Related Tutorials