Question

This StackOverflow answer介绍了如何使用CSS3设置复选框样式，而无需<label>：

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

Fiddle

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

鉴于后两种浏览器缺乏支持，根据CSS3规范，Chrome的行为是否有效？

Answer 1

这是未知的土地;规范不清楚。 CSS 2.1 spec says：“注意。此规范未完全定义：替换元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。“而且，可以说，INPUT可以被视为replaced element in CSS 2.1 sense。

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

CSS3 Selectors是已经达到推荐状态的CSS3的少数部分之一，它不清除了。 It says：“:: before和:: after伪元素可用于描述元素内容之前或之后生成的内容。它们在CSS 2.1 [CSS21]中进行了解释。“

Answer 2

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

如果所有这一切都是真的，那么Chrome的行为似乎无效，而IE和Firefox是正确的。

Answer 3

是的，绝对可以使用该伪类例如：让我们给出

的位置

"input[type="checkbox"]" 相对和

的位置

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

请尝试此操作，它将在chrome浏览器中运行，但不能在Firefox中运行。

Answer 4

是的，可以跨浏览器！

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

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

在输入[type = checkbox]上是否允许：before伪元素？

4 个答案: