Css Chrome和Firefox是否支持伪类选择器：选中？_Css_Css Selectors

Css Chrome和Firefox是否支持伪类选择器：选中？

css

Css Chrome和Firefox是否支持伪类选择器：选中？,css,css-selectors,Css,Css Selectors,我在这个问题上得到了一些相互矛盾的答案，所以我希望有人能提供一些澄清基本上，根据一些网站，：checked完全由Chrome和FF支持：然而，如果您深入到最后一个站点的测试中，您会注意到，第一个测试在Chrome（v24）和FF（v18）上失败，但在IE10上成功这个简约的样本再现了这个问题： <!DOCTYPE html"> <html> <head> <style> :checked { background-

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

基本上，根据一些网站，：checked完全由Chrome和FF支持：

然而，如果您深入到最后一个站点的测试中，您会注意到，第一个测试在Chrome（v24）和FF（v18）上失败，但在IE10上成功

这个简约的样本再现了这个问题：

<!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、Safari（Webkit）的修复非常简单，您只需设置“外观：无；”值删除所有默认样式，然后添加自己的特殊混合
Firefox（Gecko）有一个与呈现复选框和收音机相关的已知错误，所以外观值的使用有限
这是小提琴的链接
希望有帮助：）

输入{
-webkit外观：无；
-moz外观：无；
外观：无；
背景：白色；
宽度：20px；
高度：20px；
边框：2倍纯色灰色；
边界半径：10px；
}
输入：选中{
背景：红色；
}
简单地说，是的，它们都有
然而，您遇到的问题源于某些浏览器呈现表单元素（如复选框和单选按钮）的方式
当选择输入时，您无法看到背景颜色的更改，因为浏览器正在用自己的默认行为覆盖自定义
幸运的是，Chrome、Safari（Webkit）的修复非常简单，您只需设置“外观：无；”值删除所有默认样式，然后添加自己的特殊混合
Firefox（Gecko）有一个与呈现复选框和收音机相关的已知错误，所以外观值的使用有限
这是小提琴的链接
希望有帮助：）

输入{
-webkit外观：无；
-moz外观：无；
外观：无；
背景：白色；
宽度：20px；
高度：20px；
边框：2倍纯色灰色；
边界半径：10px；
}
输入：选中{
背景：红色；
}
我在这些浏览器上的测试都没有失败，但我猜在您的测试用例中，您在收音机上或Firefox或Chrome上都看不到背景色：royalblue
。@BoltClock好的一点，我用了更通用的颜色进行了检查，同样的问题。如果您查看测试页面，您可以看到第一个测试中的IE10复选框有绿色背景，Firefox和Chrome中没有背景。或者出于某种原因，这是预期的吗？@BoltClock:你能发布一个jsfiddle吗？我试过了，但没有成功。好吧，我想没有什么问题：选中选择器，基本上FireFox和Chrome不允许设置复选框或单选按钮的样式。这些测试对我来说在任何浏览器上都不会失败，但我猜在您的测试用例中，您无法在收音机上或Firefox或Chrome上真正看到背景色：royalblue。@BoltClock好的一点，我使用了更通用的颜色进行了检查，相同的Issue。如果您查看测试页面，您可以看到第一个测试中的IE10复选框有绿色背景，Firefox和Chrome中没有背景。或者出于某种原因，这是预期的吗？@BoltClock:你能发布一个jsfiddle吗？我试过了，但没能让它工作。好吧，我想这没有什么错：选中选择器，基本上FireFox和Chrome不允许设置复选框或单选按钮的样式。
<!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>