Input Field Borders

One of the simplest effects we can apply to form fields - in particular input text and textarea fields is to replace the border around the field. With most browsers as soon as you start to apply a style to the border of form fields the native styling disappears.

This replacement is straightforward for textareas since all textareas contain text. It is also straightforward for select lists. The problem comes with all of the different types of input field that can exist. Fortunately modern browsers all allow us to not only specify the tag name in the CSS but we can also specify an attribute and attribute value meaning that we can specifically apply our style to only those inputs that have a type="text" attribute (or if we want to include specific other input types we can include them by referencing their type attribute in the CSS the same way we do with the text one. There are some extremely antiquated browsers that do not support specifying an attribute like this in the CSS but almost no one uses those browsers any more so unless yours is one of the unfortunate sites to still have people running long dead browsers as a significant portion of your visitors you can safely use this in your CSS to distinguish between the different input types.

This means that the only difference between how we style an input with type="text" and how we style a textarea is that we need to give the textarea a height. By giving all of our inputs the same width like this we can produce a tidier looking form.

The one other thing to note is which units are being used where. The only place where px should ever be specified is as shown here where defining a minimum width border. The other dimensions for your form fields are best specified in em as that defines their size relative to the text to go in them.

input[type=text], textarea, select {border: 1px solid #666; padding: 0.2em; width: 11em;}
textarea {height: 4em;}

Here is how form fields look when styled with that code - with the fields the same width with the same borders:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow