Applying a box to a checkbox in Chrome

Question

I have many forms on my website, and, of course, many of the fields in them are required. If the required field remains empty, it is assigned the class "error", and I try to surround the field with red, regardless of whether it is a text field, a drop-down menu or a flag. 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, oddly enough, that works well in IE, but in Chrome the checkboxes are not circled in red, although I can see that CSS is applied to them when checking an element.

And this may not be relevant in the css code above, is active, but I have something else in my css file:

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

And it is used so that the checkboxes display correctly in IE8 and less.

Any ideas on how I can render the red border in Chrome?

EDIT: Here's the jsfiddle: http://jsfiddle.net/PCD6f/3/

Answer 1

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

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

Here jsFiddle

In particular, for the flag, use outline: 2px solid #F00; , but keep in mind that the border will still be visible. Building input fields to view them well in different browsers is complex and unreliable.

For a fully customizable checkbox, see this jsFiddle from this Gist .

EDIT Play with outline-offset: 10px;

Answer 2

CSS Button Button Styling Border without image or content. Just pure 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

It works for me. Only the circuit does not work.

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