A Pen by Arsen Zbidnyakov.

Flat-UI---Checkbox-FIX.markdown

Flat UI - Checkbox FIX

Flat UI checkbox bug fixed now! Fork based on Flat UI - Custom checkboxes by @geoffrey_crofte

A Pen by Arsen Zbidnyakov on CodePen.

License.

index.html

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

script.js

/* 
no JS 
works on KEYBOARD navigation (tab + spacebar)
*/

style.css

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