WEBCASCADE CSS3 Checkbox & Custom Radio Buttons

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;
    }
}

100

101

/* 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!

Blog