Значок не отображается на флажке в Mozilla Firefox

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/

он отлично работает на хроме, но тот же код не работает на Mozilla

Answer 1

:before и :after не доступен для элементов, которые не могут содержать контент. <input type="checkbox" /> - один из тех.

Другие:

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

В той или иной браузер, тот или иной элемент может позволить псевдо элементов подлежащего визуализации. Я лично не хотел бы полагаться на это, хотя, как представляется, это нестандартное поведение, которое может быть удалено в будущем.

Чтобы решить проблему, скрыть свой флажок, завернуть все айну в label и пойти с классом :checked псевда и селектором смежных родственного + поставить свой «значок» на вашем b:before.

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

Answer 2

Существует уже answer о том, почему вы не может использовать: после и: перед псевдоэлементом на поле ввода.

Вкратце, это «нестандартное соответствие», что он работает «отлично» на хроме.