How to style a checkbox using CSS3

How to style a checkbox using CSS3

The checkbox is an HTML element which is used to take input from the user

Checkboxes are used when more than one option is required to be selected.

The checkbox is shown as a square box or circle form that is ticked (checked) when activated.

If you want to make your site more attractive to users, you can style your checkboxes using css3.

 if we want to change the styling of the checkboxes, the first thing to do is hiding all the original checkboxes. In order to do that, we are using the visibility property to its “hidden” value.

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