html - 如何在 firefox 中使用与 "-webkit-appearance"相同的功能？

Question

我想在 HTML 复选框中删除实际的 box 并在用户点击它时有 + 和 - 标记。

为了删除复选框中的实际 box，我使用了 -webkit-appearance: none; CSS 属性。但它似乎不适用于 firefox。 (在 Chrome 中工作)

input[type=checkbox] {
   -webkit-appearance: none; // not working in firefox , the box is still there      
}
input[type=checkbox]:after {
   content: '+';
}
input.open[type=checkbox]:after {
   content: '-';
}

编辑

我也使用了 -moz-appearance: none; ，但是它会显示一个阴影框，我希望它像在 Chrome webkit 中一样完全消失。

The jsfiddle to the demo, when open this link in a firefox browser it will show that shadow box

这可能是什么原因。我怎样才能正确地做到这一点？

Answer 1

像这样使用:

input[type=checkbox] {
 -webkit-appearance: none; /* webkit browsers */
   -moz-appearance:  none; /* mozilla browser */   
   -o-appearance:   none;  /* opera browsers */
    appearance:     none;    
}

浏览器支持引用这个 link

编辑: Updated Demo

如果你想完全隐藏复选框，你可以尝试用display:none代替appearance。

 input[type=checkbox] {
      display:none;
  }
  input[type=checkbox] + label:after {
      content:"+";
      position:relative;
      left:0px;
      top:1px;
      z-index:100;
  }
  input[type=checkbox]:checked + label:after {
      content:"-";
  }
  .checkbox_label {
      height:0px;
      width:0px;
      display:inline-block;
      float:left;
      position:relative;
      left:20px;
      z-index:100;
  }

HTML:

<input type='checkbox' name='check' class="open" checked/>
<label for="check"></label>Check
<input type='checkbox' name='check' />
<label for="check"></label>Unchecked

这在 Mozilla、Chrome 中的结果相同。希望这就是您想要的。