Question

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

基本上根据某些网站，Chrome和FF完全支持检查：

但是，如果你深入研究最后一个网站上的测试，你可以注意到，第一次测试在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上支持检查伪类（也许那些只是不允许对这些元素进行样式化）或不支持？

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

Answer 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>

是否为伪类选择器：Chrome和Firefox支持检查？

1 个答案: