HTML5 Required input styling

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?

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. :)

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.

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'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.

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.

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/

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