Style check box as a rectangle which can change color - HTML CSS CSS Form

HTML CSS examples for CSS Form:input checkbox

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input checkbox

Description

Style check box as a rectangle which can change color

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ip</title> 
  <style>
input[type=checkbox] {
   display:none;
}

input[type=checkbox] + label
 {
   background:Chartreuse;
   height:17px;
   width:17px;
   display:inline-block;
   padding:0 0 0 0px;
}

input[type=checkbox]:checked + label
 {
   background:yellow;
   height:17px;
   width:17px;
   display:inline-block;
   padding:0 0 0 0px;
}
</style> <!--from ww w.  j av a 2  s  .  c  o  m-->
 </head> 
 <body> 
  <p> <input type="checkbox" name="thing" value="valuable" id="thing"> <label for="thing"></label> </p>  
 </body>
</html>

Related Tutorials