将边框应用于Chrome中的复选框

Question

我的网站上有很多表格,当然,其中的许多字段都是必需的.如果必填字段为空,则会为其分配"错误"类,并且我尝试将该字段设置为红色,无论它是文本字段,下拉菜单还是复选框.我的css文件中有以下代码:

.error input, .error select, .error textarea {
    border-style: solid;
    border-color: #c00;
    border-width: 2px;
}

现在奇怪的是,它在IE中运行良好但在Chrome中复选框没有用红色圈出,尽管我可以看到在检查元素时CSS应用于它们.

这可能是无关紧要的,上面的css代码是活跃的,但我的css文件中还有其他东西:

input[type=checkbox] {
    background:transparent;
    border:0;
    margin-top: 2px;
}

并且使用它以便在IE8中正确显示复选框.

我有什么想法可以看到Chrome中的红色边框？

编辑:这是一个jsfiddle:http: //jsfiddle.net/PCD6f/3/

Answer 1

就这样做(你的选择器错了:.error输入,.error select,.error textarea):

input[type=checkbox] {
    outline: 2px solid #F00;
}

这是jsFiddle

特别是对于复选框使用outline: 2px solid #F00;,但请记住边框仍然可见.样式化输入字段以在多个浏览器中查看它们很复杂且不可靠.

对于完全自定义样式的复选框,请参阅此Gist中的此jsFiddle.

编辑玩:outline-offset: 10px;