Checkbox Examples

Checkbox-Examples.markdown

Checkbox Examples

This shows how to make fun checkboxes using Font Awesome and basic css.

A Pen by ezos86 on CodePen.

License.

index.html

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <h1>Font Awesome<br>Creating Fun Checkboxes</h1>
<section id="checkboxes">
 <!-- Checkbox with Normal Check -->
<div class="checkbox c-checkbox">
<label>
  <input type="checkbox" />
  <span class="fa fa-check"></span>
  Check Option
</label>
</div>
  
<!-- Checkbox with Normal Check -->
<div class="checkbox c-checkbox">
<label>
  <input type="checkbox" />
  <span class="fa fa-paw"></span>
  Paw Option
</label>
</div>
  <!-- Checkbox with Remove -->
<div class="checkbox c-checkbox">
<label>
  <input type="checkbox" />
  <span class="fa fa-remove"></span>
   Remove Option
</label>
</div>
</section>

style.css

html, body{
  background: -webkit-linear-gradient( bottom , #3aa0d1, #3ad2d1);
background: linear-gradient(to top, #3aa0d1, #3ad2d1);
  height:100%;
  width:100%;
}

#checkboxes{
  background-color:#fff;
  min-height:200px;
  padding:10px;
  margin-top:20px;
}

h1{
  text-align:center;
  color:#fff;
  font-size:40px;
}

.checkbox{
  margin:20px;
}

.checkbox label {
  min-height: 21px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  line-height:22px;
}

.c-checkbox span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #ccc;
  text-align: center;
}

.c-checkbox span:before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  text-align: center !important;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
}

.c-checkbox input[type=checkbox]{
  position:absolute;
  margin: 4px 0 0;
  opacity:0;
}

.c-checkbox input[type=checkbox]:checked {
color: #fff;
transition: color 0.3s ease-out;
}

.c-checkbox input[type=checkbox]:checked + span{
border-color: #5d9cec;
background-color: #5d9cec;
}

.c-checkbox input[type=checkbox]:checked + span:before{
  color: #fff;
opacity: 1;
transition: color 0.3s ease-out;
}