0

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

基本上根据一些网站,Chrome和FF完全支持 :checked :

但是,如果您深入到最后一个站点上的测试,您会注意到,第一个测试在 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 和 Firefox 是否支持 :checked 伪类(也许那些只是不允许对这些元素进行样式设置)?

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

4

1 回答 1

4

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

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

选择输入时,您无法看到背景颜色的变化,因为浏览器正在用它自己的默认行为覆盖您的自定义。

幸运的是,对于 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>
于 2013-04-25T23:39:06.083 回答