CSS Check boxes issue with Mozilla Firefox Pseudo Elements

Question

After i spent some quite time releasing how should i make personalised Check Boxes in a html form i made some nice check boxes for my form that they work as they should in Google Chrome however in Mozilla they Labels are not aligning with check boxes (and on IE). How comes this?

Below the css and html code

and the photos of the issue

and Mozilla

       <div class="field">
     
      <label>Type of Vecicle that you'd prefer</label>

      <div class="form-group row">
        
        <div class="col-sm-8 checkbox-wrapper">
         
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Standar Cars</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Bike</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Van</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Luxury CarS</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
            <label class="form-check-label mozilla" for="severity_5">SUV</label>
          </div>
        </div>
      </div>

              </div>

and CSS

     input[type=checkbox] {
    position: relative;
      cursor: pointer;
      -moz-appearance:initial;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 2px solid #2699FB;
    border-radius: 3px;
    background-color: white;
    -moz-appearance:initial;
}

input[type=checkbox]:hover:before {
    border:2px solid cyan;
    -moz-appearance:initial;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
    -moz-appearance:initial;
}

.form-check-label {
    position: relative;
    top:5px;
    left:5px;
    -moz-appearance:initial;

}

Answer 1

You can use CSS Hack to resolve this issue.

• -moz for Firefox
• -ms for Internet Explorer
• -o for Opera <= 12

Firefox example:

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 2px solid #2699FB;
    border-radius: 3px;
    background-color: white;
}

input[type=checkbox]:hover:before {
    border:2px solid cyan;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}

.form-check-label {
    position: relative;
    top:5px;
    left:5px;
}

@-moz-document url-prefix() {  
  input[type=checkbox] {
      -moz-appearance: initial;
      padding: 6px;
  }  

  .form-check-label {
      top:0px !important;
  }
}

Result: