I’ve found this snippet some time ago and modified it a bit.¬†Works in all modern browsers.

Ideally you should use IE-Conditional tags for a fallback to regular checkboxes. I had to add an additional media-query to target IE 9 and IE 10 though.

Be careful – This snippet only works properly in WebKit-Browsers.

Here’s the code:

/* CSS3-Custom Checkboxes & Radio buttons */

input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 8px;
    margin-bottom: 0;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:active, input[type="checkbox"]:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type="checkbox"]:checked {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #777;
}

input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #777;
}

/* Radio Buttons */

input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 8px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    top: 3px;
    margin-right: 5px;
}

input[type="radio"]:active, input[type="radio"]:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type="radio"]:checked {
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}

input[type="radio"]:checked:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #777;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* Webkit outline fix */

input[type="checkbox"]:focus,
input[type="radio"]:focus {outline: 0;}

/* IE8 fallback */

.ie input[type="checkbox"],
.ie input[type="radio"] {
    padding: 0;
    border: none;
    box-shadow: none;
}

/* Target IE9 and IE10 */

@media screen and (min-width:0\0) {  
    input[type="checkbox"],
    input[type="radio"] {
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

Be sure to check out the demo. If you like this, share it on Facebook, Twitter or Google Plus.

 


Looking for cheap & reliable web hosting? РGet a webspace & domain at only $3.95 per month!