CSS Checkboxes

custom radio and checkbox styling

by moob

HTML

<div class="radio">  
    <input id="male" type="radio" name="gender" value="male" />  
    <label for="male">Male</label>
    <input id="female" type="radio" name="gender" value="female" />  
    <label for="female">Female</label>  
</div>

<div class="checkbox">  
    <input id="check1" type="checkbox" name="check" value="check1" />  
    <label for="check1">Checkbox No. 1</label>  
        <br />  
    <input id="check2" type="checkbox" name="check" value="check2" />  
    <label for="check2">Checkbox No. 2</label>  
</div>

CSS

body {
   font-family:Arial;
   font-size:20px;
}

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 1.5em;  
    margin:2px 2px 0px 0;  
    font-size: 1em; 
    background-color:#efefef;
    border:1px solid #ddd;
    padding:2px 5px 2px 1.5em;
    border-radius:3px;
} 

label:before {  
    content: "";  
    display: inline-block;  
  
    width: 1em;  
    height: 1em;  
  
    margin-right: 10px;  
    position: absolute;  
    left: 3px; top:50%; margin-top:-.5em;   
    background-color: #bbb;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
} 

input[type=radio] {  
    display: none;  
} 

.radio label:before {  
    border-radius: 50%;
}

input[type=radio]:checked + label:before {  
    content: "\2022";  /*bullet*/
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 1em;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 1em;
} 


input[type=checkbox] {  
    display: none;  
} 

.checkbox label:before {  
    border-radius: 0.1em;  
} 

input[type=checkbox]:checked + label:before {  
    content: "\2713";  /* tick*/
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 1em;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 1em;  
}