<label>
  Email (invalid)
  <input class="one" type="email" required />
</label>
<label>
  Email (valid)
  <input class="one" type="email" value="asd@123.xyz" required />
</label>
<br />
<label>
  Email (user-invalid)
  <input class="two" type="email" required />
</label>
<label>
  Email (user-valid)
  <input class="two" type="email" value="asd@123.xyz" required />
</label>
input {
  display: block;
}

input.one:valid {
  border: 2px solid green;
}

input.one:invalid {
  border: 2px solid red;
}

input.two:user-valid {
  border: 2px solid green;
}

input.two:user-invalid {
  border: 2px solid red;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.