Mozilla Firefox 伪元素的 CSS 复选框问题

Question

在我花了一些时间发布我应该如何在 html 表单中制作个性化复选框之后，我为我的表单制作了一些不错的复选框，它们在 Google Chrome 中应该可以正常工作，但是在 Mozilla 中，它们的标签与复选框不对齐（以及在 IE 上）。这是怎么回事？

下面是css和html代码

以及问题的照片

和 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>

和 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

您可以使用 CSS Hack 来解决此问题。

• -moz 用于火狐
• -ms 用于 Internet Explorer
• -o 用于 Opera

火狐示例：

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

结果：