link to playground

Elegantly developed CSS3 checkboxes that requires no JavaScript. HTML

HTML

<h1 class=”title”>Pure CSS Custom Checkboxes</h1>
<ul class=”unstyled centered”>
<li><input id=”styled-checkbox-1″ class=”styled-checkbox” type=”checkbox” value=”value1″ />
<label for=”styled-checkbox-1″>Checkbox</label></li>
<li><input id=”styled-checkbox-2″ class=”styled-checkbox” checked=”checked” type=”checkbox” value=”value2″ />
<label for=”styled-checkbox-2″>CSS Only</label></li>
<li><input id=”styled-checkbox-3″ class=”styled-checkbox” disabled=”disabled” type=”checkbox” value=”value3″ />
<label for=”styled-checkbox-3″>A disabled checkbox</label></li>
<li><input id=”styled-checkbox-4″ class=”styled-checkbox” type=”checkbox” value=”value4″ />
<label for=”styled-checkbox-4″>Fourth option</label></li>
</ul>

CSS

.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it</code>

&amp; + label {
position: relative;
cursor: pointer;
padding: 0;
}

// Box.
&amp; + label:before {
content: ”;
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
}

// Box hover
&amp;:hover + label:before {
background: #f35429;
}

// Box focus
&amp;:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

// Box checked
&amp;:checked + label:before {
background: #f35429;
}

// Disabled state label.
&amp;:disabled + label {
color: #b8b8b8;
cursor: auto;
}

// Disabled box.
&amp;:disabled + label:before {
box-shadow: none;
background: #ddd;
}

// Checkmark. Could be replaced with an image
&amp;:checked + label:after {
content: ”;
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
}

// Demo-only styles
// ————–

html {
background: lightgray;
}

body {
font-family: ‘Source Sans Pro’, sans-serif;
}

.unstyled {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
margin: 20px 0;
}

.centered {
width: 300px;
margin: auto;
}

.title {
text-align: center;
color: rgb(69, 113, 236);
}