cotopboy
9/23/2013 - 3:48 PM

change_checkbox_style Css File embedded in body!

change_checkbox_style Css File embedded in body!

change_checkbox_style.html
content_copyfile_download
<!DOCTYPE HTML>
<html>
<head>
    <title>CSS Checkbox Background Color</title>
</head>
<body>

<div>
      <input type="checkbox" id="checkbox_switch" class="regular-checkbox" value="details"></input><label for="checkbox_switch"></label>
      <div class="checkbox_tag"><label for="checkbox_switch"><?php echo lang("detail_view")?></label></div>
</div>


<style type="text/css">
.checkbox_tag    
{
    display:inline-block;
    vertical-align:middle;
} 
 
.regular-checkbox {
    display: none;
}
 
.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 0px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    vertical-align:middle;
}

.regular-checkbox + label:hover {
    background-color: #E0EEF2;

}
 
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 0px 2px rgba(0,0,0,0.05), inset 0px 0px 2px rgba(0,0,0,0.1);
    vertical-align:middle;
}
 
.regular-checkbox:checked + label {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    vertical-align:middle;
    box-shadow: 0 0px 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: #99a1a7;
}
 
.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 16px;
    font-weight:bold;
    position: absolute;
    top: -3px;
    left: 2px;
    color: #144094;
    vertical-align:middle;
}
</style>

</body>
</html>