Styled Radio/Checkbox

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="form-group">
  <label class="col-sm-6 control-label">Example question?</label>
  <div class="col-sm-6">
    <div class="checkbox">
      <input type="checkbox" id="show_image">
      <label for="show_image">
        <span class="check"><i class="fa fa-check"></i></span> Yes, please
      </label>
    </div>
  </div>
</div>


<div class="radio">
  <input type="radio" id="alphabetical" name="is_alphabetical" value="true">
  <label for="alphabetical">
    <span class="check"><i class="fa fa-circle"></i></span> Alphabetically by
  </label>
</div>

CSS

label {
  font-weight: normal;
  color: #14505e;
}

.checkbox input,
.radio input {
  display: none;
}

.checkbox label,
.radio label {
  padding-left: 30px;
  color: #333;
}

.checkbox label > span.check {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #e4e9eb;
  border-radius: 4px;
  background-color: #FFFFFF;
  padding-left: 0;
  margin-bottom: 0;
  text-align: center;
}

.radio label > span.check {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #e4e9eb;
  border-radius: 50%;
  background-color: #FFFFFF;
  padding-left: 0;
  margin-bottom: 0;
  text-align: center;
}

.checkbox input[type="checkbox"]:checked + label > span.check,
.radio input[type="radio"]:checked + label > span.check {
  background-color: #00abd2;
}

.checkbox label > span.check > i.fa {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
}

.radio label > span.check > i.fa {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  line-height: 18px;
  font-size: 10px;
}

.checkbox input[type="checkbox"]:checked + label span.check > i.fa,
.radio input[type="radio"]:checked + label span.check > i.fa {
  display: block;
  color: #FFF;
}