Flat UI checkbox bug fixed now! Fork based on Flat UI - Custom checkboxes by @geoffrey_crofte
A Pen by Arsen Zbidnyakov on CodePen.
Flat UI checkbox bug fixed now! Fork based on Flat UI - Custom checkboxes by @geoffrey_crofte
A Pen by Arsen Zbidnyakov on CodePen.
<h1><a href="http://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="http://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI - Custom checkboxes</a><br />by <a href="http://twitter.com/geoffrey_crofte">@geoffrey_crofte</a></p> |
/* | |
no JS | |
works on KEYBOARD navigation (tab + spacebar) | |
*/ |
@font-face { | |
font-family: 'Flat-UI-Icons'; | |
src: url('http://designmodo.github.io/Flat-UI/fonts/flat-ui-icons-regular.woff'); | |
} | |
[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: 0px; | |
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: 0px; left: 0px; | |
} | |
/* on checked */ | |
[type="checkbox"]:checked + label:before { | |
background:#34495E; | |
} | |
[type="checkbox"]:checked + label:after { | |
background: #39D2B4; | |
top: 0px; 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: 'Flat-UI-Icons'; | |
content: "\e00b"; | |
left: 46px; | |
margin-top:3px; | |
} | |
[type="checkbox"]:checked + label .ui:after { | |
font-family: 'Flat-UI-Icons'; | |
content: "\e00a"; | |
color: #39D2B4; | |
margin-top:3px; | |
left: 12px; | |
} | |
[type="checkbox"]:focus + label:before { | |
border: 1px dashed #777; | |
box-sizing: border-box; | |
margin-top: -1px; | |
} | |
/* Useless styles, just for demo styles */ | |
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; | |
} |