css - Applying border to a checkbox in Chrome

Question

I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox. I have the following code in my css file:

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

Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.

And this might be irrelevant at the css code above is active but I do have something else in my css file:

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

And that is used so that the checkboxes are displayed correctly in IE8 and less.

Any ideas how I can visualize the red border in Chrome?

EDIT: Here's a 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;，但请记住边框仍然可见。对输入字段进行样式设置以在多个浏览器中很好地查看它们是棘手且不可靠的。

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

编辑玩：outline-offset: 10px;

Answer 2

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

JSFiddle 链接在这里

    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; }