Question

我遇到一个问题，我创建了一个显示+和 - 的复选框，用于展开和折叠。 HTML代码 -

<input type=checkbox class="ins" ng-model=show ng-class='{open:show}'><b>Show</b>

CSS代码是 -

 .ins {
        -moz-appearance:none;
        -o-appearance:none;
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
    }
    .ins:after {

        content: ' + ';
        font-weight: 800;

    }
    .ins.open[type=checkbox]:after {

        content:" - ";
        font-weight: 800;
    }

https://jsfiddle.net/1jj1714e/

它在chrome上运行得很好，但是相同的代码在Mozilla上不起作用

Answer 1

关于无法在输入字段上使用：after和：before伪元素的原因已经有answer。

简而言之，它是一种“非标准的一致性”，它在Chrome上“非常精细”。

Answer 2

:before和:after在无法拥有内容的元素上不可用。 <input type="checkbox" />就是其中之一。

其他：

<input type="radio" />
<input type="text/date/email/number/whathaveyou" />
<br />
<hr />

在此浏览器或该浏览器中，此元素或该元素可允许呈现伪元素。不过，我个人并不想依赖它，因为这似乎是非标准行为，可能会在将来的任何时候被删除。

要解决您的问题，请隐藏您的复选框，将所有内容打包到label，然后使用:checked伪类和相邻的兄弟选择器+来放置您的＆＃34;图标＆＃34 ;在b:before上。

https://jsfiddle.net/1jj1714e/1/

Mozilla Firefox中的复选框上未显示图标

2 个答案: