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

问题描述

这个 StackOverflow 答案 描述了如何在不需要 :

This StackOverflow answer describes how to style checkboxes using CSS3 without requiring a <label>:

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

小提琴

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

This works in Chrome 22 but not in Firefox 15 or IE 9.

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

Given the lack of support in the latter two browsers, is Chrome's behavior valid according to the CSS3 specification?

推荐答案

这是未知的领域；规范没有弄清楚.CSS 2.1 规范说:

This is uncharted land; the specifications do not clear things up. The CSS 2.1 spec says:

注意.本规范没有完全定义 :before 和 :after 与替换元素(例如 HTML 中的 IMG)的交互.这将在未来的规范中更详细地定义."而且，值得商榷的是，INPUT 可以被视为 CSS 2.1 意义上的 替换元素.

"Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." And, debatably, INPUT could be seen as a replaced element in CSS 2.1 sense.

人们可能认为这些伪元素不能用于没有任何内容的元素(即具有 EMPTY 声明的内容)，例如 IMG 或 INPUT.但是，措辞提到了 IMG，并且附录 D 对选择器有规则br:before.

One might think that these pseudo-elements cannot be used for elements that cannot have any content (i.e., with EMPTY declared content), such as IMG or INPUT. However, the wording mentions IMG, and Appendix D has a rule with the selector br:before.

CSS3 选择器是少数几个达到推荐状态的 CSS3 部分之一，它没有把事情搞清楚.它说:

And CSS3 Selectors, one of the few parts of CSS3 that have reached recommendation status, does not clear things up. It says:

::before 和 ::after 伪元素可用于描述在元素内容之前或之后生成的内容.它们在 CSS 2.1 [CSS21] 中有解释."

"The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1 [CSS21]."

这篇关于输入 [type=checkbox] 上是否允许使用 :before 伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！