:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The:validCSS pseudo-class represents any<input> or other<form> element whose contentsvalidate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

Try it

label {  display: block;  margin-top: 1em;}input:valid {  background-color: ivory;  border: none;  outline: 2px solid deepskyblue;  border-radius: 5px;  accent-color: gold;}

<form>  <label for="email">Email Address:</label>  <input name="email" type="email" value="na@me@example.com" />  <label for="secret">Secret Code: (lower case letters)</label>  <input name="secret" type="text" value="test" pattern="[a-z]+" />  <label for="age">Your age: (18+)</label>  <input name="age" type="number" value="5" min="18" />  <label    ><input name="tos" type="checkbox" required checked /> - Do you agree to    ToS?</label  ></form>

This pseudo-class is useful for highlighting correct fields for the user.

Syntax

css

:valid {  /* ... */}

Accessibility

The color green is commonly used to indicate valid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Examples

Indicating valid and invalid form fields

In this example, we include extra<span> elements to generate content that indicates valid or invalid data:

html

<form>  <fieldset>    <legend>Feedback form</legend>    <p>Required fields are labelled with "required".</p>    <div>      <label for="fname">First name: </label>      <input name="fname" type="text" required />      <span></span>    </div>    <div>      <label for="lname">Last name: </label>      <input name="lname" type="text" required />      <span></span>    </div>    <div>      <label for="email">        Email address (include if you want a response):      </label>      <input name="email" type="email" />      <span></span>    </div>    <div><button>Submit</button></div>  </fieldset></form>

To provide these indicators, we use the following CSS:

body {  font-family: sans-serif;  margin: 20px auto;  max-width: 460px;}fieldset {  padding: 10px 30px 0;}legend {  color: white;  background: black;  padding: 5px 10px;}fieldset > div {  margin-bottom: 20px;  display: flex;  flex-flow: row wrap;}button,label,input {  display: block;  font-family: inherit;  margin: 0;  box-sizing: border-box;  width: 100%;  padding: 5px;  height: 30px;}input {  box-shadow: inset 1px 1px 3px #cccccc;  border-radius: 5px;}input:hover,input:focus {  background-color: #eeeeee;}input:required + span::after {  font-size: 0.7rem;  position: absolute;  content: "required";  color: white;  background-color: black;  padding: 5px 10px;  top: -26px;  left: -70px;}button {  width: 60%;  margin: 0 auto;}

css

input + span {  position: relative;}input + span::before {  position: absolute;  right: -20px;  top: 5px;}input:invalid {  border: 2px solid red;}input:invalid + span::before {  content: "✖";  color: red;}input:valid + span::before {  content: "✓";  color: green;}

We set the<span>s toposition: relative so that we can position the generated content relative to them. We then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. To add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.

Note:We've used::before to add these labels, as we were already using::after for the "required" labels.

You can try it below:

Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.