Using Level 4 CSS validity pseudo-classes to improve UX

How to use

<input type="text" placeholder="name" required>
/* this will display until the input value is valid */
input[ type=text ]:invalid {
border-color: red;
}
/* once a value is found, show the user */
input[ type=text ]:valid {
border-color: green;
}
<input type="email" placeholder="email address" required>

How widely is this supported?

--

--

--

Front-End & WordPress Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Weaver

Michael Weaver

Front-End & WordPress Developer

More from Medium

Responsive Web Design

A Quick Recap of my past Tech Experience

Color Extraction Tools for Front End Web Development

What is the difference between REM and EM on CSS3