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（适用于Firefox）
-ms for Internet Explorer
-o for Opera <= 12

Firefox示例：

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

结果：

Mozilla Firefox伪元素

1 个答案: