Grow your CSS skills. Land your dream job.

:valid

Last updated on:

The :valid selector allows you to select <input> elements that do not contain valid content, as determined by its type attribute. :valid 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:

See the Pen :valid & :invalid inputs by Chris Coyier (@chriscoyier) on CodePen

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

  • :valid can be “chained” with other pseudo-selectors: like :focus to only validate when the user is typing, :before or :after to generate icons or text to provide more user feedback, or attribute selectors like input[value=""] to only validate input fields containing content.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
10.0+ 5.0+ 4.0+ 10.0+ 10+ 5+ 2+

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

Comments

  1. Anoniem
    Permalink to comment#

    My attempt to explain the :valid selector: The :valid selector is basically a pseudo-class which can work together with the input element. Let’s say you use the input element to check if a user types something correct or wrong. Now with the :valid selector you can edit let’s say the color of an input field so the user knows if it is correct or wrong. If a word is typed correctly, the input box becomes green:

    :valid {
      background-color: green;
    }
    

    Browser compatibility: Chrome 10, Firefox 4, Internet explorer 10, Opera 10, Safari 5. Firefox mobile 4, Opera mobile 10, Safari 5. Here’s a very nice demo from the mozilla website: https://developer.mozilla.org/samples/cssref/input-validation.html

  2. amir
    Permalink to comment#

    hello

  3. JoeTheShmoe
    Permalink to comment#

    It seems like you copied the first sentence from the :invalid page – The :valid selector allows you to select <input> elements that do not contain valid content – seems like that should be The :valid selector allows you to select <input> elements that contain valid content

  4. Fredrik

    The :valid and :invalid selector respectively aren’t actually parts of the Selectors Level 3 spec, but of Level 4.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".