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

Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):

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

Here's the jsFiddle

Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.

For a completely custom styled checkbox, see this jsFiddle from this Gist.

EDIT Play with: outline-offset: 10px;