checkbox style with css

by Korah Babu Varghese

HTML

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" />
&nbsp;<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" />
&nbsp;<span></span>

CSS

body
{
    font-family:arial;
}
.flipswitch
{
    position: relative;
    background: white;
    width: 120px;
    height: 40px;
    -webkit-appearance: initial;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline:none;
    font-size: 14px;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    cursor:pointer;
    border:1px solid #ddd;
}
.flipswitch:after
{
    position:absolute;
    top:5%;
    display:block; 
    line-height:32px;
    width:45%;
    height:90%;
    background:#fff;
    box-sizing:border-box;
    text-align:center;
    transition: all 0.3s ease-in 0s; 
    color:black;
    border:#888 1px solid;
    border-radius:3px;
}
.flipswitch:after
{
    left:2%;
    content: "OFF";
}
.flipswitch:checked:after
{
    left:53%;
    content: "ON";  
}