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

问题描述

此StackOverflow答案介绍了如何使用CSS3设置复选框，而不需要使用< label> ：

  input [type = checkbox]：before {
 content： display：inline-block; width：12px; height：12px;背景：红色; 
} 
  

小提琴

这在Chrome 22中可用，但不能在Firefox 15或IE 9中使用。

解决方案由于后两种浏览器缺乏支持，是Chrome的行为根据CSS3规范有效 div>

这是未知的土地;规格不清楚的东西。 CSS 2.1规范说明：注意。本规范没有完全定义：被替换的元素（例如HTML中的IMG）之前和之后的交互。这将在未来规范中更详细地定义。可以说，INPUT可以看作是一个

可能会认为这些伪元素不能用于不能包含任何内容的元素（即，使用EMPTY声明的内容），例如IMG或INPUT。但是，措词提到IMG和附录D 有一个规则，选择器 br：before 。

CSS3选择器是CSS3中已达到推荐状态的少数部分之一，清理事物。 它说：:: before和:: after伪元素可用于描述生成的元素内容之前或之后的内容。它们在CSS 2.1 [CSS21]中解释。

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;
} 

Fiddle

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

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

解决方案

This is uncharted land; the specifications do not clear things up. The CSS 2.1 spec says: "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.

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.

And CSS3 Selectors, one of the few parts of CSS3 that have reached recommendation status, does not clear things up. It says: "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]."

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