Chrome 和 Firefox 是否支持伪类选择器 :checked？答案

【问题标题】：Is pseudo-class selector :checked supported in Chrome and Firefox?Chrome 和 Firefox 是否支持伪类选择器 :checked？
【发布时间】：2013-04-26 07:39:06
【问题描述】：

我在这个问题上得到了一些相互矛盾的答案，所以我希望有人提供一些澄清。

根据一些网站，Chrome 和 FF 完全支持 :checked：

但是，如果您深入研究最后一个站点上的测试，您会注意到，第一个测试在 Chrome (v24) 和 FF (v18) 上失败，但在 IE10 上成功

http://tools.css3.info/selectors-test/test-checked.html#checked

此简约示例重现了该问题：

<!DOCTYPE html">
<html>
<head>
<style>
      :checked { background-color: royalblue;}
</style>
</head>
<body>
    <input type="radio" checked />
    <input type="radio"/>
    <input type="checkbox" checked />
    <input type="checkbox" />
</body>
</html>

Chrome 和 Firefox 是否支持 :checked 伪类（也许那些只是不允许这些元素的样式）？

我不是网页设计师，所以也许我错过了一些简单的东西。

【问题讨论】：

在这些浏览器上的测试对我来说都没有失败，但我猜在你的测试用例中，你在 Firefox 或 Chrome 上的收音机或复选框上看不到 background-color: royalblue。
@BoltClock 好点，我检查了更通用的颜色，同样的问题。如果你看一下测试页面，你可以看到在IE10上第一次测试的复选框有绿色背景，Firefox和Chrome没有背景。还是出于某种原因符合预期？
@BoltClock：你能发布一个 jsfiddle 吗？我试过了，但无法让它工作。
好的，我想 :checked 选择器没有什么问题，基本上 FireFox 和 Chrome 不允许设置复选框或单选按钮的样式。

标签： css css-selectors

【解决方案1】：

简单地说，是的，他们都这样做。

但是，您遇到的问题源于某些浏览器呈现表单元素（例如复选框和单选按钮）的方式。

选择输入后，您无法看到背景颜色发生变化，因为浏览器正在使用其自己的默认行为覆盖您的自定义设置。

幸运的是，Chrome、Safari (Webkit) 的修复很简单，您只需设置一个“外观：无”；值清除所有默认样式，然后添加您自己的特殊混合。

Firefox (Gecko) 有一个与渲染复选框和无线电相关的已知错误，因此您将在外观值中获得有限的使用。

这是小提琴http://jsfiddle.net/traxp/的链接

希望有帮助:)

<!DOCTYPE html>
<html>
    <head>
        <style>
            input {
                -webkit-appearance:none;
                -moz-appearance:none;
                appearance:none;
                background:white;
                width:20px;
                height:20px;
                border:2px solid grey;
                border-radius:10px;
            }
            input:checked {
                background:red;  
            }
        </style>
    </head>
    <body>
        <input type="radio" checked />
        <input type="radio"/>
        <input type="checkbox" checked />
        <input type="checkbox" />
    </body>
</html>

【讨论】：