How to Style any Input Field – Tips and Techniques

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 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"/>
   Enter Email
</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 preference and to be treated as one.

<div class="custom-field">
  <input id="email-field" type="email"/>
  <label for="email-field" class="placeholder">Enter Email</label>
</div>

An even shorter and still valid alternative is to use the label tag with the input field inside but with the “aria-label” attribute for screen readers and then use the CSS “_after_” pseudo-element to create the placeholder element.

<label class="custom-field" aria-label="Enter Email">
  <input type="email"/>
</label>

// create the placeholder element
.custom-field::after {
  content: attr(aria-label);
}

All these three alternatives will work for the type of styling we will be doing for the rest of this article so pick one and let's keep going. Below, you can see that all three options render the same thing on the page and I am using chrome browser to look at the result.

In case you are asking why to put the label after the input, it is because we can use input states like “_focus_” and others to target the label and control how it looks and animates. An alternative would be using javascript which is beyond the scope of this tutorial.

software-development programming ui-design css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

UI/UX Design & Development Company | UI/UX Design Services

We are an expert UI/UX development company in India & USA. Our UI/UX developers help you with creative UI/UX design for web & mobile apps. Consult us today!

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire UI/UX Designer | Hire Creative UI/UX Designer

WebClues Infotech is a leading website and mobile development services company. We specialize in full stack development services as well as iOS and Andriod app creation.

UX designer ? UI designer ? UI Developer ?

**The UX designer** is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should...