输入 [type=checkbox] 上是不是允许使用 :before 伪元素？

Posted 2023-03-05

【中文标题】输入 [type=checkbox] 上是不是允许使用 :before 伪元素？

【英文标题】：Is the :before pseudo-element allowed on an input[type=checkbox]?输入 [type=checkbox] 上是否允许使用 :before 伪元素？

【发布时间】：2012-10-01 15:34:30

【问题描述】：

This *** answer 描述了如何在不需要<label> 的情况下使用 CSS3 设置复选框的样式：

input[type=checkbox]:before 
    content:""; display:inline-block; width:12px; height:12px; background:red;
 

Fiddle

这适用于 Chrome 22，但不适用于 Firefox 15 或 IE 9。

鉴于后两种浏览器缺乏支持，Chrome 的行为是否符合 CSS3 规范？

【参考方案1】：

我认为 Chrome 的行为是无效的。如果你take a look here，它表示::before 和::after 伪元素在目标元素的content 之前或之后添加新的content。输入元素没有content；他们只有一个value。例如，您不能使用<input>Pasta</input>。

如果这一切都是真的，那么看起来Chrome的行为是无效的，而IE和Firefox是正确的。

【讨论】：

避免链接到已经成为建议的规范工作草案，除非您特别引用草案：w3.org/TR/CSS21/generate.html

@BoltClock 好电话。对此感到抱歉。

【参考方案2】：

这是一片未知的土地；规范并没有把事情弄清楚。 CSS 2.1 spec says：

“注意。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。”而且，有争议的是，INPUT 可以被视为replaced element in CSS 2.1 sense。

人们可能会认为这些伪元素不能用于不能有任何内容（即带有 EMPTY 声明的内容）的元素，例如 IMG 或 INPUT。但是，措辞中提到了 IMG，而Appendix D 与选择器 br:before 有一个规则。

CSS3 选择器是 CSS3 中为数不多的已达到推荐状态的部分之一，没有解决问题。 It says：

“::before 和 ::after 伪元素可用于描述在元素内容之前或之后生成的内容。它们在 CSS 2.1 [CSS21] 中进行了解释。”

【讨论】：

伪元素定义已移至其他模块，让选择器仅定义语法并简要总结 CSS1 和 CSS2 伪元素。希望他们会在相关模块中为::before 和::after 澄清这一点（可能是传说中的生成/替换内容级别 3 模块的重写）。

【参考方案3】：

是的，你绝对可以使用那个伪类 例如：让我们给出位置

"input[type="checkbox"]" 是相对的和位置

"input[type="checkbox"]:before" 绝对的。

试试这个，它可以在 chrome 中运行，但在 Firefox 中不行。

【参考方案4】：

是的，可以跨浏览器！

[type=checkbox] 
  appearance: none;
  -webkit-appearance: none; /* Safari */


[type=checkbox]::before 
  content: 'a text before';