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

Answer 1

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.

Answer 2

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/

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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.