<form>
  <label for="email">Email address</label>
  <input type="email" id="email" placeholder="Enter your email" aria-describedby="emailinfo" />
</form>
input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

input {
  min-width: 320px;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  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.