CSS-Tricks, :valid & :invalid

CSS-Tricks, :valid & :invalid.markdown

CSS-Tricks, :valid & :invalid

Forked from Zachary Kain's Pen CSS-Tricks, :valid & :invalid.

A Pen by Tali Walt on CodePen.

License.

index.html

<fieldset>
  <label for="email">Email:</label>
  <input type="email" name="email">
</fieldset>
  
<fieldset>
  <label for="emailRequired">Email (required):</label>
  <input type="email" name="emailRequired" required>
</fieldset>

style.css

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}


body {
  padding: 3em;
}
fieldset {
 border: 0;   
}
input {
  padding: 0.25em 0;
  margin-bottom: 0.75em;
}