UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The :invalid selector allows you to select <input> elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.
This selector has one particular use: providing a user with feedback while they are interacting with a form on the page. The example below uses CSS to turn the “Email” fields red or green, responding to the whether or not the contents match a valid email address pattern:
Note how the first <input> (“Email”) is green—valid—even when there is no content in the field. This is because the input is optional, so leaving it blank would result in a valid form submission. To fix this behaviour, the second <input> has a “required” attribute, which means that a blank field would result in an invalid form submission.
Points of Interest
:invalidcan be “chained” with other pseudo-selectors: like:focusto only validate when the user is typing,:beforeor:afterto generate icons or text to provide more user feedback, or attribute selectors likeinput[value=""]to only validate input fields containing content.
Related Properties
Other Resources
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Nope | Nope |
:invalid was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is getting better. If you require older browser support, either polyfill, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.
this is ok.
Solidify Your Examples:
Email: [email protected]
Email (required) : [email protected] > becomes Valid _
Bug in IE10+ usign pseudo-elements
Hi Chris, you may want to update this content as it contain a slight inaccuracy – in “Points of interest” it says we can chain :invalid to :before :after to display some ‘content’ on inputs, but as a matter of fact we can’t use ::after and ::before on inputs (regardless of chaining).
input[required]:invalid::after,
input[required]:valid::after {
content: ‘not a chance’;
}
Neil
You’re right, Neil.
Here is some explanation why it’s not possible: http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field
Was just going to mention the same thing: can’t actually use generated content on input elements. Just spent 20 minutes trying to do it based on this article before I remembered why it wasn’t working! :)
dfs
gcfbv
It should be noted that [value=”] only captures the initial state of the element, which makes it kind of useless as a selector.
Can you update the Browser Support table?
According to caniuse.com android and iOS now support :invalid pseudo-class.
@link http://caniuse.com/#search=%3Ainvalid
IE will incorrectly match
:invalidon:disabledinputs.To fix this, we have to increase selector specificity with the
:enabledpseudo-class.Worth noting that
:invalidon select element does not work on Safari/Mac (at least version 13).Also for people who use this to mimic placeholder gray color on input fields, note that Firefox dev edition on mac renders colors differently for both. I don’t know why. Same color hex ref but renders differently.
Other than the part about chaining :after with :invalid, very good, but it would also be very helpful to also talk about how an (input) element’s :invalid pseudo class can be set or cleared (:valid set) or at least provide a link to such.
Thank you