How to Change Checkbox Size Css

If you search something about changing checkbox size, you can find many silly information about it. Lots of website say that size of checkbox can change with width and height. This is completely wrong. Only height and weight are not enough. If you read my article carefully, you can change size of checkbox easily.




Download | Demo
This is html part.

[html]
<div>
<div class="tag">Checkbox Small</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
</div>
<div>
<div class="tag">Checkbox Big</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
</div>
[/html]

This is css part.

[css]
label {
display: inline;
}

.regular-checkbox {
display: none;
}

.regular-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
background-color: #e9ecee;
border: 1px solid #adb8c0;
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: #99a1a7;
}

.regular-checkbox:checked + label:after {
content: ‘\2714’;
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}

.big-checkbox + label {
padding: 18px;
}

.big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
}

.tag {
font-family: Arial, sans-serif;
width: 200px;
position: relative;
top: 5px;
font-weight: bold;
text-transform: uppercase;
display: block;
float: left;
}
[/css]

The part which is about size exists below. You can modify it easily.

[css]
.big-checkbox + label {
padding: 18px;
}

.big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
}
[/css]

Source: inserthtml