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

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

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

它在chrome上运行得非常好，但在Mozilla上却不起作用。已经有一个关于为什么不能在输入字段上使用：after和：before伪元素的问题了

---

简言之，它在chrome上工作“非常好”，这是一种“非标准一致性”。

:before

和

:after

在不能包含内容的元素上不可用<代码>就是其中之一

其他：

在这个或那个浏览器中，这个或那个元素可能允许渲染伪元素。不过，我个人不想依赖这一点，因为这似乎是一种非标准行为，将来任何时候都可能被取消

要解决您的问题，请隐藏复选框，将所有内容包装为

标签

，然后使用

：checked

伪类和相邻同级选择器

+

将您的“图标”放在

b:before

上

---

它在我的JSFIDLE中不起作用。。。。您想再举一个相同功能的综合示例吗？用所有浏览器测试？我最近一直在做同样的事情。。。。这是工作代码。

：before

和

：after

在不能包含内容的元素上不可用<代码>就是其中之一。好的，谢谢，那么我应该在代码中更改什么，以执行相同的任务。好的，谢谢，那么我应该在代码中更改什么，以执行相同的任务。

 .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;
    }