Styled a checkbox like a button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input checkbox

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

Description

Styled a checkbox like a button

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">

input[type="checkbox"] {
   display: none;
}
input[type="checkbox"] + label {
   display:inline-block; /* or block */
   line-height:normal;
   cursor:pointer;
   padding: 3px 14px;
   background-color: #EFEFEF;
   border-radius: 4px;
   border: 1px solid #D0D0D0;
   margin: 40px 100px 10px 40px; /* however you please */
}
input[type="checkbox"] + label:hover {
   border-color: #000;
   background-color: #911;
   color: #fff;
}
input[type="checkbox"]:checked + label {
   border-color: #000;
   background-color: #888;
   color: #fff;
}


      </style> 
 </head> <!--from   ww  w  .ja va2 s.  c om-->
 <body> 
  <input type="checkbox" value="1"> 
  <label>Red</label>  
 </body>
</html>

Related Tutorials