:: before在Firefox中输入 [英] ::before with input in Firefox

问题描述

我想使用CSS伪类 :: before 之前在输入标签前放置一些内容。它适用于Chrome，但不适用于Firefox。

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?

以下是一段代码：

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工作正常：

...and here's the outcome. Chrome works just fine:

但有 Firefox中无更改：

推荐答案

根据规范。

作者使用：before和：after伪元素指定生成内容的样式和位置。如他们的名字所示，：before和：after伪元素指定元素的文档树内容之前和之后的内容的位置。 content属性与这些伪元素一起指定要插入的内容。

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支持，因为它不符合规范（或错误？）。

:before and :after should only work on the element which can act as a container of content. <input> cannot contains any content so it should not support those pseudo-elements. Chrome supports because it does not follow the spec (or bug?).

这篇关于:: before在Firefox中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！