<div class="iv"><input type="email" placeholder="you@example.com" required aria-label="Email"><span class="ok">Looks good</span><span class="no">Enter a valid email</span></div>About this layout
An email field that turns green or red as you type, using :user-valid and :user-invalid with a small status message.
How it works
The email field is required and has type email, so the browser already knows when it is valid. The :user-valid and :user-invalid pseudo-classes only apply after the person has interacted with the field, so the border turns green or red as they type, and a sibling selector reveals the matching message under the input.
Ways to customise it
- Change the green and red border colours.
- Edit the two message texts in the span elements.
- Use type url or a pattern attribute for other validation rules.
Good to know
Unlike :valid and :invalid, the user-prefixed versions do not shout at people before they start typing. They are supported in current browsers. Do not rely on colour alone, which is why text messages appear too.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.