Style a checkbox and remove check and border - 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 a checkbox and remove check and border

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Quick Tip: Easy CSS3 Checkboxes and Radio Buttons</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

input[type="checkbox"],
input[type="radio"] {
   opacity: 0;
   position: absolute;
}
input[type="checkbox"] ~ label:before,
input[type="radio"] ~ label:before {
   content: '';<!--   w w w.  j av  a  2s .  co  m-->
   display: inline-block;
   cursor: pointer;
   margin: 2px 10px -2px 0;
   width: 10px;
   height: 10px;
   background: #999;
   border: 3px solid #999;
   border-radius: 2px;
   transition: .3s;
}
input[type="radio"] ~ label:before {
   border-radius: 50%;
}
input[type="checkbox"]:checked ~ label:before,
input[type="radio"]:checked ~ label:before {
   background: #333;
}
input[type="checkbox"]:focus ~ label:before,
input[type="radio"]:focus ~ label:before {
   border-color: #73b9ff;
}
body {
   padding: 4rem;
   color: #555;
}
hr {
   border: 0;
   height: 1px;
   background: #eee;
   margin: calc(2rem - 5px) 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <p> <input type="checkbox" id="c1"> <label for="c1">Check Box</label> </p> 
  <p> <input type="checkbox" id="c2"> <label for="c2">Check Box 1</label> </p> 
  <hr> 
  <p> <input type="radio" id="r1" name="rr"> <label for="r1">Radio Button</label> </p> 
  <p> <input type="radio" id="r2" name="rr"> <label for="r2">Radio Button</label> </p>  
 </body>
</html>

Related Tutorials