Easy solution to styling input elements based on their type

Your styling of HTML forms is important in order to have creative and good-looking web forms. Applying styles with CSS to all input forms is pretty simple, but sometimes you may need to style specific input fields and not others.

Styling input forms

You may know how to style all input fields using css. For example, the demo code below adds a border to all input fields in a form:

input {
	border: 1px solid #f00;
}

This will add a 1pixel red border on all input fields in a form, but what happens when you want to style specific inputs based on the type?

Styling specific input forms based on type

This is easier to do than you may think. To style an input type, just use the following code:

input[type="text"] {
	border: 1px solid #f00;
}

This will add a red border on only text input fields. You can replace “text” with the name of any input field such as “radio”, “button”, “password”,  or “checkbox”.

Conclusion

This simple trick is very easy to execute and will help keep your HTML and CSS clean and easy to manage. You can use this technique on any type of form, whether it be a contact form, login form, or a super advanced custom form.