Question

我为Chrome浏览器创建了一个自定义复选框，我在Chrome上开发，但是一旦完成，我就进行了浏览器测试，它根本不适用于Firefox。我在codepen中附上了我的代码副本。除了psuedo类之前和之后，有没有其他方法可以构建自定义复选框？

 [1]: https://codepen.io/Edward-Developer/pen/NvRbzR


HTML

    <div class="img-icon-wrapper">
      <p>            
       <span class="wpcf7-form-control-wrap checkbox-972"><span class="wpcf7-form-
       control     wpcf7-checkbox wpcf7-exclusive-checkbox lori"><span 
       class="wpcf7-list-item first       last"><label><input type="checkbox" 
       name="checkbox-972" value="Lori St. Louis" />     <span class="wpcf7-list-
       item-label">Lori St. Louis</span></label></span></span>       </span>
      </p>
   </div>

CSS


input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid blue;
  top: 0;
}

input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid $lightBlue;
  top: 0;
}

input[type="checkbox"]:checked:after {
    position: relative;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -4px;
    content: "✓";
    height: 41px;
    width: 19px;
    -webkit-transform: rotate(7deg) skew(0deg);
    left: 8px;
    bottom: 38px;
    font-size: 65px;

}
input[type="checkbox"]:hover:checked:after {
  border-color: $darkBlue;
}

input[type="checkbox"]{
  margin-left:0;
}

Answer 1

如果我理解正确，Firefox会忽略：before和：之后父元素不呈现子元素。所以，：before和：after不适用于type = checkbox的输入。

有关跨浏览器的替代方法，请参阅：https://stackoverflow.com/a/21863085/542047

Answer 2

我有同样的问题。最后，通过添加一个属性使复选框可见

-moz-appearance:initial

此属性本机（基于平台）将其外观用作OS主题。

自定义CSS复选框不适用于Mozilla，适用于所有其他浏览器

2 个答案: