Question

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

删除我使用box CSS属性的复选框中的实际-webkit-appearance: none;。但它似乎不适用于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而不是外观。

 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相同。希望这就是你想要的。

Answer 2

-webkit - 适用于Google crome，Firefox使用 -moz - 。

Answer 3

试试这个，

适用于Firefox浏览器

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

Answer 4

-webkit - * 前缀仅适用于基于WebKit的浏览器，其中一些示例包括：chrome，safari等。

Here is a list of WebKit-based desktop browsers

Mozilla Foundation是基于Gecko的浏览器和供应商扩展前缀对于Mozilla浏览器， -moz - * 。

所以，你必须使用 -moz-appearance：none;

你的最终答案是：

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>

<强> CSS

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

Check code in jsfiddle here

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

4 个答案: