::before with input in Firefox [duplicate]

Question

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:

This is what you are looking for: stackoverflow.com/questions/4574912/… — Andrew
– Andrew, Commented Jun 6, 2016 at 9:22
This would be even better: stackoverflow.com/a/4660434/2003702 — thepio
– thepio, Commented Jun 6, 2016 at 9:25
Well if you want to have the red rings around the inputs try adding a span and put the before on that — Andrew
– Andrew, Commented Jun 6, 2016 at 9:26

Bryan Ash · Accepted Answer · 2017-08-25 13:21:32Z

29

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

edited Aug 25, 2017 at 13:21

Bryan Ash

4,4993 gold badges46 silver badges58 bronze badges

answered Jun 6, 2016 at 9:31

Jimmy Ko

8871 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aleksandar Belic Over a year ago

In other words, Chrome plays by its own rules. Thanks for this info!

Levidps Over a year ago

Interesting that Safari copies chrome on this one and displays pseudo elements for inputs.

Jimmy Ko Over a year ago

@Levidps this issue may come rom Webkit, Chrome's engine is forked from Webkit

John Over a year ago

It works on Firefox with checkboxes.

Collectives™ on Stack Overflow

::before with input in Firefox [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related