<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.