8

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/

mmvsbg
  • 3,570
  • 17
  • 52
  • 73

3 Answers3

19

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;

Community
  • 1
  • 1
achudars
  • 1,486
  • 15
  • 25
  • Hello, thank you! Originally I had it this way, however, the inputs are inside a div that contains the class 'error'. If I do it this way, the check box gets circles with red line but then the label next to is has the same border as well which is ugly and which is why I'm trying to just applied it to the inputs. http://jsfiddle.net/PCD6f/3/ – mmvsbg Jul 17 '13 at 10:47
  • Here's something more like it: http://jsfiddle.net/PCD6f/5/ I'm trying to circle the checkbox only, without the label and then the input textfield below it. – mmvsbg Jul 17 '13 at 10:50
  • That actually helps, here's what I came up with: http://jsfiddle.net/PCD6f/7/ The problem here is that in IE the checkbox has 4px border now adding the outline and the border together.. – mmvsbg Jul 17 '13 at 11:00
  • 2
    **Last attempt - completely custom styled checkbox: http://jsfiddle.net/achudars/8wW74/** Source: https://gist.github.com/stucox/2556785 – achudars Jul 17 '13 at 11:11
  • 1
    Well the inset did not help as it kept adding it to the border. However, I ended up changing the border of the rest of the elements to outline as well per your suggestion and now it works well in all browers. Here is the working solution: http://jsfiddle.net/PCD6f/8/ Thank you very much! – mmvsbg Jul 17 '13 at 11:11
  • This may sound obvious, but to anyone who finds the border too strong, simply keep the outline but change it to a lighter color. – redolent Sep 09 '14 at 21:51
  • This is a very good edited answer. outline:1px solid white; outline-offset:-1px; works like a charm, thanks ! – Erwan Clügairtz Sep 28 '17 at 07:49
3

enter image description here

Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.

enter image description here

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;
}
Velu S Gautam
  • 822
  • 9
  • 18
0

Works for me.only outline doesn't work.

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

swati sharma
  • 1