Style selected chick box as a three-state button - HTML CSS CSS

HTML CSS examples for CSS:Selector

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

Description

Style selected chick box as a three-state button

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolo</title> 
  <style>
.year input[type=checkbox] {
   display:none;
}

.year label {<!--from  w ww  . jav a 2 s  .c o  m-->
   display:block;
   border:2px solid Chartreuse;
   padding:6px;
   width:81px;
   text-align:center;
   margin-bottom:4px;
   cursor:pointer;
}

.year input[type=checkbox]:checked + label {
   color:yellow;
   border:2px solid blue;
   background-color:pink;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="year"> 
   <input id="month-1" type="checkbox"> 
   <label for="month-1">Lorem i</label> 
   <input id="month-2" type="checkbox"> 
   <label for="month-2">Lorem ip</label> 
   <input id="month-3" type="checkbox"> 
   <label for="month-3">Lorem</label> 
   <input id="month-4" type="checkbox"> 
   <label for="month-4">Lorem</label> 
   <input id="month-5" type="checkbox"> 
   <label for="month-5">Lor</label> 
   <input id="month-6" type="checkbox"> 
   <label for="month-6">Lore</label> 
   <input id="month-7" type="checkbox"> 
   <label for="month-7">Lore</label> 
   <input id="month-8" type="checkbox"> 
   <label for="month-8">Lorem </label> 
   <input id="month-9" type="checkbox"> 
   <label for="month-9">Lorem ips</label> 
   <input id="month-10" type="checkbox"> 
   <label for="month-10">Lorem i</label> 
   <input id="month-11" type="checkbox"> 
   <label for="month-11">Lorem ip</label> 
   <input id="month-12" type="checkbox"> 
   <label for="month-12">Lorem ip</label> 
  </div>  
 </body>
</html>

Related Tutorials