:valid

The :valid CSS pseudo-class represents any <input> or <form> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

input:valid {
  background-color: #ddffdd;
}

Syntax

:valid

Example

This example presents a simple form that colors elements green when they validate and red when they don't.

HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}
form:invalid {
  border: 5px solid #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
input:required:valid {
  border-color: #008000;
}

Specifications

Browser compatibility

See also

• :invalid
• :required
• :optional