::before with input in Firefox
According to the specification.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
:before
and :after
should only work on the element which can act as a container of content. <input>
cannot contain any content so it should not support those pseudo-elements. Chrome supports because it does not follow the spec (or bug?).
![Aleksandar Belic](https://i.stack.imgur.com/k0Vd0.jpg?s=256&g=1)
Comments
-
Aleksandar Belic about 2 years
I'm trying to put some content before an input tag using CSS pseudo-class ::before. It works in Chrome but not in Firefox. What seems to be the problem with Firefox?
Here's a snippet:
input::before { content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0px 0px 5px #9F0002 inset; }
<input type="radio" name="gender" class="radio" value="male">male <input type="radio" name="gender" class="radio" value="female">female
...and here's the outcome. Chrome works just fine:
but there are no changes in Firefox: