::在 Firefox 中输入之前

Question

我正在尝试使用 CSS 伪 class ::before 在输入标签之前放置一些内容。它适用于 Chrome 但不适用于 Firefox。 Firefox 似乎有什么问题？

这是一个片段：

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

...结果如下。 Chrome 工作正常：

但是 Firefox 没有变化:

Answer 1

根据 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 和 :after 只适用于可以作为内容容器的元素。 <input> 不能包含任何内容，因此它不应该支持那些伪元素。 Chrome 支持，因为它不符合规范（或错误？）。

::在 Firefox 中输入之前

::before with input in Firefox

css

firefox

google-chrome

pseudo-element