1

I am facing a problem that i have created a checkbox displaying + and - for expand and collapse. HTML Code - 

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

CSS code is -

 .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/

it works perfectly fine on chrome, but same code not works on Mozilla

John
  • 2,820
  • 3
  • 30
  • 50
Komal Singh
  • 451
  • 5
  • 19
  • it is not functioning in my jsfiddle.... would you like another comprehensive example of the same functionality ? tested with all the browsers ? I've been working on exact same thing lately.... – Pouya Ataei Aug 07 '15 at 05:42
  • https://jsfiddle.net/1jj1714e/ This is working code.. – Komal Singh Aug 07 '15 at 05:54
  • `:before` and `:after` is not available on elements that cannot have content. `` is one of those. – connexo Aug 07 '15 at 06:22

2 Answers2

1

There is already an answer about why you cannot use the :after and :before pseudo-element on an input field.

In brief, it is a "non-standard conformance" that it works "perfectly fine" on chrome.

Community
  • 1
  • 1
Israfel
  • 1,652
  • 1
  • 12
  • 6
0

:before and :after is not available on elements that cannot have content. <input type="checkbox" /> is one of those.

Others:

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

In this or that browser, this or that element may allow for pseudo elements being rendered. I personally wouldn't want to rely on that, though, as it appears that this is non-standards behaviour which may be removed any time in the future.

To solve your problem, hide your checkbox, wrap everything ain a label and go with :checked pseudo class and adjacent sibling selector + to put your "icon" on your b:before.

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

connexo
  • 53,704
  • 14
  • 91
  • 128