<h1><a href="https://designmodo.github.io/Flat-UI/">Flat UI</a> - Checkbox FIX</h1>
<h2>CSS only</h2>
<p>Do you like?</p>
<form action="#">
<p><input type="checkbox" id="test1" /><label for="test1"><span class="ui"></span>Paris</label></p>
<p><input type="checkbox" id="test2" /><label for="test2"><span class="ui"></span>London</label></p>
<p><input type="checkbox" id="test3" /><label for="test3"><span class="ui"></span>New York</label></p>
</form>
<br /><p class="txtcenter copy">a fork based on <a href="https://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI - Custom checkboxes</a><br />by <a href="https://twitter.com/geoffrey_crofte">@geoffrey_crofte</a></p>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 95px;
cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
left: 0; top: 0;
width: 80px; height: 30px;
background: #DDDDDD;
border-radius: 6px;
transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
width: 30px; height: 30px;
transition: all .2s;
border-radius: 6px 0 0 6px;
background: #7F8C9A;
top: 0; left: 0;
}
/* on checked */
[type="checkbox"]:checked + label:before {
background:#34495E;
}
[type="checkbox"]:checked + label:after {
background: #39D2B4;
top: 0; left: 51px;
border-radius: 0 6px 6px 0;
}
[type="checkbox"]:checked + label .ui,
[type="checkbox"]:not(:checked) + label .ui:before,
[type="checkbox"]:checked + label .ui:after {
position: absolute;
left: 6px;
width: 65px;
border-radius: 15px;
font-size: 14px;
font-weight: bold;
line-height: 22px;
transition: all .2s;
}
[type="checkbox"]:not(:checked) + label .ui:before {
font-family: 'FontAwesome';
content: "\f00d";
left: 46px;
margin-top: 3px;
}
[type="checkbox"]:checked + label .ui:after {
font-family: 'FontAwesome';
content: "\f00c";
color: #39D2B4;
margin-top: 3px;
left: 12px;
}
[type="checkbox"]:focus + label:before {
border: 0; outline: 0;
box-sizing: border-box;
}
/* Basics */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #7F8C9A;
background: #FCFDFD;
}
h1, h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
color:#aaa;
}
h2 {
margin: 5px 0 2em;
color: #1ABC9C;
}
form {
width: 80px;
margin: 0 auto;
}
h2 + P {
text-align: center;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #1ABC9C;
}
h1 > a {
color: #1ABC9C;
text-decoration: none;
}
/*
TIP:
No JS. Works on KEYBOARD navigation (tab + spacebar).
*/
/*
19/01/2016
UPDATE:
- icon font fix;
- focus 1px border fix.
*/