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

7 Replies to “Don’t Stick to The Default! Create Pure CSS Checkbox”

  1. 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.

  2. wlan knacken

    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 *