CSS :valid Selector

CSS :valid selector allows you to style an <input> element only if the value that it contains is valid. The value that it contains is valid or not is decided by the settings of the element.

For example, if we take an <input> element with type="number" and set its limits using the min="10" and max="20" attributes, it expects a value between 10 and 20.

If the value entered in this input element is between 10 and 20, it’s a valid value. Otherwise, it will be considered an invalid value.

The :valid selector in the following example sets a springgreen color background to the input element only if the value it contains is between 10 and 20:

Example:

input:valid{
    background-color: springgreen;
}

The :valid selector in the following example sets a springgreen color background to the <input> element only if it contains a valid email address.

Example:

input[type="email"]:valid{
    background-color: springgreen;
}

CSS Syntax

The syntax of the :valid selector is as follows:

:valid{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :valid selector.

Selector
:valid10.010.04.05.010.0

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.