HTML5 Required input styling

Question

In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they try to submit the form without filling out a required element. Is there a selector for this? How about for the little message box which pops up?

@SLaks: What's the point then? It works as long as you like the default styling? — Xodarap, Mar 09 '11 at 17:10
See this question for more info http://stackoverflow.com/questions/5660177/styling-the-hint-on-a-html5-input-field-using-required-attribute — alpha1, Jun 29 '12 at 16:55

score 29 · Answer 1 · answered Mar 10 '11 at 15:48

You can use :valid and :invalid selectors. Something like this

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).

So by native validation I mean that in chrome if you do <input type="email"> the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to a type="text" field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.

Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)

It looks to me like these are set on page load, so I have the same problem as with `[required]`. — Xodarap, Mar 14 '11 at 15:55
@Xodarap, it is set at page load, but the input changes state from valid to invalid, so this will work just fine. — Johan, Sep 07 '11 at 11:16
@Johan doing this changes the styling only when the input changes between (in)valid. Not as Xodarp wants - which requires the styling to happen to all the other boxes only after submit is clicked... — will, May 02 '12 at 10:21

score 13 · Answer 2 · edited May 15 '20 at 22:07

13

I've resorted to using JavaScript to apply a class of .validated to the form on submit, then use that class to style :invalid fields, e.g.:

.validated input:invalid {
  ...
}

This way fields don't show up as invalid on page load, only after the form is submitted.

Ideally there would be a pseudo class applied to the form on submit.

edited May 15 '20 at 22:07

cmbuckley

40,217
9
77
91

answered Apr 13 '11 at 22:32

Toby

301
2
3

You could also do something like this to allow live validation checking: `$('input[required]').on 'keyup', -> $(this).addClass('validate-me').off('keyup')` and then add CSS styles for `input[required].validate-me:invalid` etc – Jayphen Aug 23 '12 at 08:20

score 4 · Answer 3 · answered Sep 25 '13 at 19:31

There's a :user-error pseudoclass in the CSS Selectors 4 working draft that will do exactly this, firing on both input blur and form submit.

In the mean time, I'm personally using the awesome webshims polyfill library which covers :user-error, or you could hack it out yourself with something along the lines of Toby's answer.

score 4 · Accepted Answer · answered Mar 09 '11 at 17:03

Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.

Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.

JQuery has some nice plugins that take care of this for you http://docs.jquery.com/Plugins/validation

there are no plugins on your link – Fanky Mar 04 '19 at 12:29 — Fanky, Mar 04 '19 at 12:29

score 2 · Answer 5 · answered Jan 06 '14 at 19:09

2

input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

Tried and tested in chrome. I haven't tested it in any other browser.

answered Jan 06 '14 at 19:09

JustSomeGuy

315
2
17

This is the best answer! – Marcio Mazzucato Jul 21 '14 at 20:04

score 1 · Answer 6 · answered Jun 11 '14 at 21:21

This solution will style input fields that are required via attribute while blank. Browsers will remove the :invalid pseudo class when populating a required field on keydown. Recent versions of Firefox automatically apply something similar to this style but Chrome and IE do not.

input[required]:invalid { box-shadow: 0 0 3px 1px red }

Try it: http://jsfiddle.net/2Ph2X/

score 0 · Answer 7 · edited Feb 07 '19 at 07:17

0

Very simple, just add the class when the element is in focus, then during the submit it gives focus on the elements that are incorrect and the client is filling and validating one by one I believe it is the best solution without using JavaScript.

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}

edited Feb 07 '19 at 07:17

Community

1
1

answered May 22 '18 at 16:21

Navi

171
5

HTML5 Required input styling

7 Answers7

Linked

Related