Member-only story
Advanced CSS-only Input Fields — Interactive, Animated, Validated
The finished input field will react to being focused and edited and passing or failing validation .. all with no JavaScript at all!
The <input> element is one of the most complex elements available in HTML. You can change the type of input field rendered via the type attribute. Valid types include: text, number, button, checkbox, radio, search, email, range, tel, file, color, date, time, image, password, url, reset and submit.
But even if we forget all this variety and just look at the most basic text
input, there are plenty of settings and features available via its attributes. For example, we can set the minimum and maximum accepted input text length or validate the field against more complex rules with a regular expression. You could also make it read-only, enable spell check or add a placeholder text to display before the user enters anything … all this via its HTML attributes.
When it comes to styling these input fields you can use a few interesting pseudo-classes to style depending on…
