How to style a checkbox using CSS3

How to style a checkbox using CSS3

HTML

<label class="cc_checkbox check_control">
First checkbox
<input type="checkbox" checked />
<div class="checkbox_indicator"></div>
</label>

<label class="cc_checkbox check_control">
First checkbox
<input type="checkbox" />
<div class="checkbox_indicator"></div>
</label>

CSS

.cc_checkbox {
display: block;
position: relative;
padding-left:40px;
margin-bottom: 15px;
cursor: pointer;
font-size: 18px;
}

.cc_checkbox input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.checkbox_indicator {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #ffd800;
}

.cc_checkbox input:checked ~ .checkbox_indicator {
background: #ffd800;
}

.cc_checkbox input:disabled ~ .checkbox_indicator {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}

.checkbox_indicator:after {
content: '';
position: absolute;
display: none;
}

.cc_checkbox input:checked ~ .checkbox_indicator:after {
display: block;
}

.check_control .checkbox_indicator:after {
left: 8px;
top: 4px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.check_control input:disabled ~ .checkbox_indicator:after {
border-color: #7b7b7b;
}

Second Checkbox Styling

HTML

<label class="checkbox-cc checkbox-control">First checkbox
<input type="checkbox" checked="checked"/>
<div class="checkbox-indicator"></div>
</label>

<label class="checkbox-cc checkbox-control">First checkbox
<input type="checkbox"/>
<div class="checkbox-indicator"></div>
</label>

CSS

.checkbox-group {
display: inline-block;
vertical-align: top;
background: #fff;
text-align: left;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
padding: 30px;
width: 200px;
height: 210px;
margin: 10px;
}

.checkbox-cc {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 15px;
cursor: pointer;
font-size: 18px;
}

.checkbox-cc input {
position: absolute;
z-index: -1;
opacity: 0;
}

.checkbox-indicator {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #000;
border-radius: 4px;
}

.checkbox-indicator:before {
content: '';
width: 10px;
height: 20px;
position: absolute;
background: white;
right: 0px;
top: -3px;
transform: rotate(35deg);
}

.checkbox-cc-radio .checkbox-indicator {
border-radius: 50%;
}

.checkbox-cc:hover input ~ .checkbox-indicator,
.checkbox-cc input:focus ~ .checkbox-indicator {
background: #fff;
}

.checkbox-cc input:checked ~ .checkbox-indicator {
background: #fff;
}

.checkbox-cc:hover input:not([disabled]):checked ~ .checkbox-indicator,
.checkbox-cc input:checked:focus ~ .checkbox-indicator {
background: #fff;
}

.checkbox-cc input:disabled ~ .checkbox-indicator {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}

.checkbox-indicator:after {
content: '';
position: absolute;
display: none;
}

.checkbox-cc input:checked ~ .checkbox-indicator:after {
display: block;
}

.checkbox-control .checkbox-indicator:after {
left: 12px;
top: -6px;
width: 5px;
height: 18px;
border: solid #000;
border-width: 0px 1px 1px 0;
transform: rotate(45deg);
background: #fff;
}

.checkbox-control input:disabled ~ .checkbox-indicator:after {
border-color: #7b7b7b;
}