当前位置: 首页 > 面试题库 >

:before伪元素是否在输入[type = checkbox]上被允许?

澹台衡
2023-03-14
问题内容

这个答案描述了如何使用CSS3设置复选框样式,而无需使用<label>

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

这在Chrome 22中有效,但在Firefox 15或IE 9中无效。

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


问题答案:

这是未知的土地;规格并不能解决问题。在CSS
2.1规范说

“注意。该规范并未完全定义:before和:after与替换元素(例如HTML中的IMG)的交互。这将在以后的规范中更详细地定义。”
而且,值得一提的是,INPUT可以看作是CSS
2.1意义上
的替换元素。

可能会认为这些伪元素不能用于不能包含任何内容(即具有EMPTY声明的内容)的元素,例如IMG或INPUT。但是,该措辞提到了IMG,附录D的选择器有一条规则br:before

和CSS3选择,已达到推荐状态CSS3的少数地区之一,确实 没有
明确的事情了。它说:

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



 类似资料:
  • 问题内容: 在此MS兼容性表上,它说IE9不支持伪元素和,但是当我尝试时,它似乎支持伪元素… 难道我做错了什么?我认为并且将是隐藏IE9中内容的好工具,而实际上却不是。 问题答案: IE8和更高版本支持CSS2伪元素和(具有传统的单冒号表示法)。它们不是CSS3的新功能。 另一方面,双冒号表示法是CSS3的新功能。IE9 确实 支持and和CSS1伪元素and的新符号。然而,展望未来,没有新的伪元

  • 问题内容: 我正在尝试在字段上使用CSS伪元素,但是它不起作用。如果我将它与一起使用,则可以正常运行。 这有效(在“ buu!”之后和“更多”之前放置笑脸) 这是行不通的-它只将someValue涂成红色,但没有笑脸。 我究竟做错了什么?我应该使用另一个伪选择器吗? 注意:我无法在周围添加,因为它是由第三方控件生成的。 问题答案: 并且在Internet Explorer 7及更高版本中的任何元素

  • 问题内容: 我正在尝试为HTML5中的提出一些好的默认样式,并尝试了以下方法: las,内容从不显示。对于伪元素,双冒号和单冒号都不是问题。我都尝试过。拥有一个伪元素和一个伪类也不是问题。我已经尝试过不使用和了。在Chrome,Safari和Firefox中,我得到了相同的行为(Firefox没有和类,但是我尝试了不使用它们。) 在伪元素工作细,,,和元素-其中一些是块元件和一些是内联。 因此,我

  • 问题内容: 我正在尝试使用选择器将图像放置在另一个图像上,但是我发现将图像放置在一个元素之前(仅在其他某个元素之前)根本不起作用。具体来说,我的风格是: 我发现这很好用: 但这不是: 我可以使用或元素代替它,浏览器可以将我的图像正确地覆盖在该元素中的图像上,但是如果我将overlay类应用于自身,则无法正常工作。 我希望这项工作能够正常进行,因为这会让我感到不舒服,但更重要的是,我有大约100个我

  • 问题内容: 我正在显示链接的属性。title属性通过… 附加到链接。 现在,我想知道如何在移入和移出时动画化伪元素的不透明度。 html CSS 任何想法为什么这不起作用? 问题答案: WebKit(Chrome,Safari)不支持在伪元素上进行过渡。 它应该可以在Firefox中使用。 编辑: WebKit中的问题现在已解决。该修补程序已经可以在Chrome Carnery中找到,因此它将从版

  • 问题内容: 我有一个:before开头的’quote’和一个:after结束的报价。 现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。 有人知道这是否可能吗? 到目前为止,我的代码: 问题答案: 已经提出了嵌套和伪元素的想法;请参阅“生成和替换的内容”模块的这一部分。但是,该模块已被放弃,等待完全重写,因此在重新发布该文档之前,我不会屏息。即便如此,嵌套内容伪元素