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

标签 javascript html css angularjs firefox

我遇到了一个问题，我创建了一个显示 + 和 - 用于展开和折叠的复选框。 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关于为什么您不能在输入字段上使用 :after 和 :before 伪元素。

简而言之，它在 chrome 上“完美运行”是一种“非标准一致性”。

关于javascript - Mozilla Firefox 中的复选框未显示图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31870414/