16

这个 StackOverflow 答案描述了如何使用 CSS3 设置复选框的样式而不需要<label>：

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

小提琴

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

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

4

4 回答 4

17

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

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

有人可能会认为这些伪元素不能用于不能有任何内容（即带有 EMPTY 声明内容）的元素，例如 IMG 或 INPUT。但是，措辞中提到了 IMG，并且附录 D中有一条规则与 selector br:before。

而 CSS3 选择器，作为 CSS3 中少数几个达到推荐状态的部分之一，并没有搞清楚。它说：

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

于 2012-10-11T06:30:25.053 回答
8

我认为 Chrome 的行为是无效的。如果你看一下这里，它会说::before和::after伪元素content在目标元素之前或之后添加新元素content。输入元素没有content; 他们只有一个value. 例如，您不能这样做<input>Pasta</input>。

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

于 2012-10-11T03:32:11.070 回答
0

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

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

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

试试这个，它可以在 chrome 中工作，但不能在 Firefox 中工作。

于 2020-07-20T05:42:53.910 回答
0

是的，这是可能的和跨浏览器！

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

[type=checkbox]::before {
  content: 'a text before';
}
于 2021-08-03T10:12:51.277 回答