Change check box color when its enabled - HTML CSS CSS Form

HTML CSS examples for CSS Form:input checkbox

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

Description

Change check box color when its enabled

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

label, input[type="checkbox"] {
   line-height: 2.1ex;
}
input[type="checkbox"] {
   position: absolute;
   left: -999em;
}
input[type="checkbox"] + label {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}
input[type="checkbox"] + label::before {
   content: "";<!--from  w w  w.  j a v  a2  s .c  om-->
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid rgb(166, 166, 166);
   border-radius: 4px;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
   margin-right: 0.5em;
}
input[type="checkbox"]:disabled:checked + label::after {
   border: 3px solid #ff0000;
   border-top: none;
   border-right: none;
}
input[type="checkbox"]:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0);
   top: 0.9ex;
   left: 0.4ex;
   border: 3px solid blue;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}


      </style> 
 </head> 
 <body> 
  <fieldset> 
   <legend>Checkbox example</legend> 
   <input id="checkbox" type="checkbox"> 
   <label for="checkbox">Some awesome checkbox label</label> 
  </fieldset> 
  <fieldset> 
   <legend>Checkbox example</legend> 
   <input id="checkbox2" type="checkbox" checked disabled> 
   <label for="checkbox2">Some awesome checkbox label</label> 
  </fieldset>  
 </body>
</html>

Related Tutorials