How to Style any Input Field – Tips and Techniques
The HTML input field is simple, powerful, and does what it was meant to do. With over 30 attribute options it is one of the most robust and worth learning about HTML tags. Because users are constantly interacting with fields on the page, a lot of effort is put into making it appealing and easy to interact with but a lot can go wrong.
The basic markup
A good rule of thumb and actually a CSS best practice is to always label your fields. For the rest of this article, I will be using a nested field inside the label markup which implicitly binds the label and the input tag together and removes the need to specify the “for” attribute for the label and “id” for the input, not to mention it makes it super easy to style the field as well.
<label class="custom-field">
<input type="email"/>
<span class="placeholder">Enter Email</span>
</label>Another alternative would be to use a “div” tag as a wrapper for things like positioning so they have a common parent. A “fieldset” tag can also make sense in some cases as well. This wrapping technique allows the label and input to be side by side if that's your…
