Skip to main content
css checkbox

Don’t Stick to The Default! Create Pure CSS Checkbox

No doubt html and css are beautiful language but it’s a worthless if you can’t make right use of it. Most website have got form and keep their checkboxes unstyled. Why? you have a css, just play around with it.

Let’s see how to create pure css checkbox/checkboxes.

Pre Thought:

1) We will hide our actual checkboxes with display:none

2) We will apply css style using pseudo element :checked. note that :checked is only associated with input (<input>) elements of type radio and checkbox.

3) Some additional style to make our page looks so damn preety.


 <h1>Pure CSS Checkbox</h1>
 <h2>Which beauty you like the most?</h2>
  <form>
   <label>
    <input type="checkbox" name="" value=""/>
    <span>HTML</span>
   </label>
  
   <label>
    <input type="checkbox" name="" value=""/>
    <span>CSS</span>
   </label>
  
   <label>
    <input type="checkbox" name="" value=""/>
    <span>JAVASCRIPT</span>
   </label>
  </form>

body{
margin-top:25px;
background:url('bg.png');
}
input[type=checkbox] {display:none;}
h1 {
font-family:sans-serif;
text-align:center;
font-size:40px;
color:rgba(250, 206, 14, 0.9);
margin:50px 0;
}
h2{
font-family:sans-serif;
text-align:center;
font-size:25px;
color:#fff;
margin:50px 0;	
}
span {
margin-left:15%;
border:2px solid rgba(250, 206, 14, 0.9);
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
font-weight:600;
color:rgba(250, 206, 14, 0.9);
font-size:0.9em;
letter-spacing:1px;
text-decoration:none;
font-family:sans-serif;
text-align:center;
width:180px;
height:40px;
line-height:40px;
cursor:pointer;
display:inline-block;
-webkit-transition:background-color 150ms ease-in;
-moz-transition:background-color 150ms ease-in;
-ms-transition:background-color 150ms ease-in;
-o-transition:background-color 150ms ease-in;
transition:background-color 150ms ease-in;
}

span:hover {
background-color:rgba(250, 206, 14, 0.9);
color:#fff;
}

input[type=checkbox]:checked + span {
text-decoration:none;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

input[type=checkbox]:checked:hover + span {
color:#fff;
text-decoration:none;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

Chekout the demo

  • Ben

    Looks great and all but the demo would be better with keyboard support.
    Also double clicking selects the text.
    You could add user-select:none to fix that though.

    • Prakash Nakrani

      Thanks for pointing me out Ben, will try to consider this kind of little implementation with my next demos.

  • I am really thankful to the owner of this web page who has shared this
    impressive post at at this place.

  • Rashmi

    Pls help me out!
    The tick mark doesnt appear when I click on the check box!
    I tried it with Mozilla firefox,IE,UC browser!

    • Ashok

      Im facing same problem..please help me

  • i am looking for css which will provide some tags on left & right side at the bottom of page.

  • When I initially commented I appear to have clicked the -Notify
    me when new comments are added- checkbox and now whenever
    a comment is added I receive four emails with the same comment.
    There has to be an easy method you can remove me from that service?
    Kudos!