Html 如何使用与“相同”的功能-webkit外观“；在firefox中？

我想在HTML复选框中删除实际的

框

，并在用户交替单击时标记

+

和

-

要删除我使用的复选框中的实际

框

-webkit外观：无CSS属性。 但它似乎不适用于firefox。（在铬合金中工作）

编辑

我使用了

-moz外观：无同样，但它会显示一个阴影框，我希望它完全消失，就像在Chrome webkit中一样


原因可能是什么。我怎样才能做到这一点呢
 像这样使用：

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

有关浏览器支持，请参阅此

编辑：

如果要完全隐藏复选框，可以尝试显示：无而不是外观

 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:


检查
未经检查

这在Mozilla、Chrome中的结果也是一样的。。希望这就是你想要的。
-webkit-适用于Google crome和Firefox使用-moz-试试这个

用于Firefox浏览器

input[type=checkbox] {
   -moz-appearance:  none;
   appearance:     none;
}

-webkit-*前缀仅适用于基于webkit的浏览器，例如：chrome、safari等


 Mozilla基金会是基于壁虎的浏览器和供应商扩展前缀
对于Mozilla浏览器是-moz-*
因此，您必须使用-moz外观：无

你的最后答案是：

input[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance: none;
    appearance: none;
}

如果您想完全删除复选框，并想用加号和减号控制复选框，那么下面给出的代码肯定适合您：

HTML

<label>
    <input type="checkbox" />
    <span class="state"></span>
    <span class="text">The Check Box</span>
</label>

Firefox的可能副本不是webkit浏览器。对于Firefox，您应该使用前缀
-moz-
不能使用Firefox 38.0.5-我认为您没有更新已经选中的小提琴。但不起作用。现在它显示了一个盒子的阴影。我怎样才能完全删除它呢？我已经添加了代码，使用它你可以完全删除复选框。你也可以在jsfiddle added.ready checked中检查它。但不起作用。现在它显示了一个盒子的阴影。我如何才能完全删除它？在Chrome中工作没有问题，在firefox浏览器中打开它现在将有一个阴影框：顺便说一句：没有一个会和给定的功能不一样，对吗？是的。太好了，你知道怎么切换吗？比如在一个真正的复选框中？现在它是静态的。@prime-。标签用与输入
id
属性匹配的
属性附着到匹配的输入。单击标签时，将选中输入，并进行自定义切换。当输入被隐藏时，所有样式都在标签上完成。
input[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance: none;
    appearance: none;
}

<label>
    <input type="checkbox" />
    <span class="state"></span>
    <span class="text">The Check Box</span>
</label>

input[type="checkbox"] {
    display: none;
}
span {
    display: inline-block;
    vertical-align: middle;
}
.state:before {
    content:"+";
}
input[type="checkbox"]:checked + .state:before {
    content:"-";
}