DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
:invalid selector allows you to select
<input> elements that do not contain valid content, as determined by its
: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:
Check out this Pen!
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,
:afterto generate icons or text to provide more user feedback, or attribute selectors like
input[value=""]to only validate input fields containing content.
: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).
content: ‘not a chance’;
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! :)
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.
IE will incorrectly match
To fix this, we have to increase selector specificity with the
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.