::之前在Firefox中输入

Ale*_*lic 4 css firefox google-chrome pseudo-element

我正在尝试使用CSS伪类::之前在输入标记之前放置一些内容.它适用于Chrome,但不适用于Firefox.Firefox似乎有什么问题?

这是一个片段:

input::before {
	content: '';
	display: block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	box-shadow: 0px 0px 5px #9F0002 inset;
}
Run Code Online (Sandbox Code Playgroud)
<input type="radio" name="gender" class="radio" value="male">male
<input type="radio" name="gender" class="radio" value="female">female
Run Code Online (Sandbox Code Playgroud)

......这就是结果.Chrome工作得很好:

在此输入图像描述

Firefox没有变化:

在此输入图像描述

Jim*_* Ko 17

根据规范.

作者使用:before和:after伪元素指定生成内容的样式和位置.正如其名称所示,:before和:after伪元素指定元素文档树内容之前和之后的内容位置.'content'属性与这些伪元素一起指定插入的内容.

:before并且:after应该只对可以充当内容容器的元素起作用.<input>不能包含任何内容,因此它不应该支持那些伪元素.Chrome支持,因为它不符合规范(或错误?).

  • 换句话说,Chrome按照自己的规则播放.感谢您提供此信息! (4认同)
  • @Levidps 这个问题可能来自 Webkit,Chrome 的引擎是从 Webkit 分叉的 (2认同)