<form>
  <label for="email">Email address</label>
  <input type="email" id="email" required placeholder="A valid email, like name@domain.com" aria-describedby="emailinfo" />
  <p class="info" id="emailinfo">Add a valid email address to see the state change</p>
</form>
input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

input {
  min-width: 320px;
  padding: 0.5rem 1rem;
  line-height: 1;
  font: inherit;
  border: 1px solid black;
  border-radius: 0.25rem;
}

.info {
  font-size: 0.9rem;
  font-style: italic;
  margin-block-start: 0.5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.