::before with input in Firefox

11,394

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?).

Share:
11,394
Aleksandar Belic
Author by

Aleksandar Belic

while(coffee) { code(); }

Updated on June 07, 2022

Comments

  • Aleksandar Belic
    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:

    enter image description here

    but there are no changes in Firefox:

    enter image description here