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

7 thoughts on “Don’t Stick to The Default! Create Pure CSS Checkbox

  1. Ben says:

    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.

  2. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *