将边框应用于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 input，.error select，.error textarea ）：

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

这是 jsFiddle

特别是对于复选框，请使用 outline: 2px solid #F00; ，但请注意边框仍然可见。设置输入字段以在多个浏览器中查看它们很复杂且不可靠。

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

编辑播放： outline-offset: 10px;

Answer 2

复选框和单选按钮CSS样式边框没有任何图像或内容。只是纯粹的CSS。

JSFiddle Link here

    input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}

/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}

Answer 3

为我工作。只有大纲不起作用。

input[type=checkbox].has-error{ outline: 1px solid red !important; }