Pretty checkbox - Fixed

by Dzyann

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="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>
</div>

CSS

.container-box {
  display: block;
  max-width: 200px;
}

.neat-checkbox {
  display: inline;
  width: 40px;
}

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

.neat-checkbox label {
  margin-left: 0px;
  margin-top: 2px;
  line-height: 17px !important;
  display: inline-block; /* make it block-level */
  position: relative; /* so that child elements can be positioned relative to it */
  padding-left: 25px; /* allow some space for the pseudo checkbox */
}

.neat-checkbox label:before {
  font-family: "FontAwesome";
  content: "\f00c";
  color: white;
  left: 0px;
  top: 0px;
  outline: none;
  cursor: pointer;
  display: block; /* make it block-level */
  position: absolute; /* give an absolute position (defaults to 0,0) */
  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;
}

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

.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);
}