A Pen by Tom Bremer.

CSS3-Checkbox-Styling.markdown

CSS3 Checkbox Styling

A Pen by Tom Bremer on CodePen.

License.

index.html

<div class="wrapper">
  <input id="1" type="checkbox" class="fakie_box">
  <label for="1" class="fakie_icon">You can write in the labels too</label>
</div>
<div class="wrapper">
  <input id="2" type="checkbox" class="fakie_box" checked>
  <label for="2" class="fakie_icon"></label>
</div>

style.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
*{font-family: 'Montserrat';}
*:before{
  font-family: "FontAwesome";
}
.wrapper{
  position: relative;
  height: 20px;
  margin: 10px;
}

.fakie_box{ display: none; }

.fakie_icon:before{
  display: inline-block;
  content: "\f00c";
  background-color: #e5e5e5;
  color: #d8d8d8;
  text-shadow: 1px 1px 0px #fff,
              -1px -1px 0px #a3a3a3;
  width: 16px;
  height: 16px;
  padding: 2px;
  margin: -4px 4px 0px 0px;
  border: 1px solid #000;
  border-radius: 3px;
  vertical-align: middle;
}

input[type=checkbox]:checked + .fakie_icon:before{
  content: "\f00c";
  color: #2baad5;
  text-shadow: 1px 1px 0px #fff,
              -1px -1px 0px #a3a3a3;
}