CSS :valid Pseudo Class

The :valid pseudo-class selects form controls (such as <input>, <select>, and <textarea>) with a value that validates according to the element's settings.

The :valid selector applies to form controls that meet their validation constraints, such as <input> elements with min and max attributes, email fields with a valid email address, number fields with a numeric value, url or date fields with valid data, and required fields with a non-empty value.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

CSS :valid syntax

css

:valid {
  css declarations;
}

Example of the :valid selector:

CSS :valid code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        border: 1px solid #cccccc;
        padding: 5px 10px;
      }
      input:valid {
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:valid selector example</h2>
    <form>
      <input type="email" value="[email protected]" />
    </form>
  </body>
</html>

In the given example, the styling disappears when an invalid email address is entered.

Practice

What is the usage and function of the 'valid' CSS pseudo-class?

'valid' pseudo-class is used to apply styles to all HTML elements that fit into the criteria of an invalid input according to form validation rules.'valid' pseudo-class is applied to HTML elements that pass client-side validation.'valid' pseudo-class changes the content of an HTML element.It is used to style the form controls when the user submits the form.It can change the border colour of input fields when they contain valid data.

CSS :valid Pseudo Class ​

Version ​

Syntax ​

Example of the :valid selector: ​

Practice ​

CSS :valid Pseudo Class

Version

Syntax

Example of the :valid selector:

Practice