pretty checkbox

by Dzyann

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ee-neat-checkbox">
  <input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
  <label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>

CSS

.ee-neat-checkbox {
  display: inline;
  width:40px;
}
.ee-neat-checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  font-size: 10px !important;
  display: none;
}
.ee-neat-checkbox label {
  margin-left: 0px;
  margin-top: 2px;
  line-height: 17px !important;
}
.ee-neat-checkbox label:before {
  font-family: "FontAwesome";
  content: "\f00c";
  color: white;
  position: relative;
  left: -5px;
  top: 0px;
  outline: none;
  cursor: pointer;
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  box-sizing: border-box;
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}
.ee-neat-checkbox input[type=checkbox]:checked + label:before {
  background-color: #2bb19e;
  border-color: #2bb19e;
  color: #fff;
  font-family: "FontAwesome";
  content: "\f00c";
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}
.ee-neat-checkbox input[type="checkbox"]:focus + label::before {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}