Styling Form Fields

Form fields have traditionally been amongst the hardest elements in a web page to style. Not all of the styles that you can apply to other elements in your web page can be successfully applied to form fields. In this series we will look at some of the ways that you can style form fields.

Just about all of your form fields will be defined using one of three tags - input, textarea, or select (most of the different ones use the input tag - including all of the new HTML 5 form field types other than combo boxes). So by styling those three and datalist which is used by combo boxes we can apply common styles to all of our form fields by applying the styles to those four tags.

Some styles are much easier to apply to form fields than others are. One of the simplest to apply to all of our form fields is to give them all background and text colours. There is no difference in the way that we apply these particular styles to form fields to the way that we apply them to anything else and so the resultant CSS to change the background and text of all of our form fields is:

input, textarea, select, datalist {
background-color : #f00;
color : #fff;

Here is how form fields look when styled with that code - with the form field content all appearing as white text on a red background:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow