Mark Ferree - Open Source Web Development

After reading my article about using CSS to style form controls you might get the impression that I never use CSS for this purpose. Allthough I avoid it when not necessary, sometimes modifying a look of a form improves the usability of a site.

One way that designers show the relative importance of objects on the screen is by increasing the size of one element relative to the other elements on the page. Many sites call attention to input boxes by making them extra beefy. Today I will show you how to create a beefy input box that works in all of the modern browsers.

To start with we'll need some valid form code:

Now that we have the underlying source we need to start thinking about the CSS needed to achieve the effect we are looking for. Let's start with the input box. To start with we'll use some built in CSS styles to give the box a slight 3 dimensional effect.

Next lets make the input box oversized using relative values. To give the box a set height set the font size to 2em.

We want to allow the box to resize with the rest of the site. To keep the width relative we will first want to apply a width to the containing form. Personally I like to use ems for width on whatever elements allow it on the site. This creates a site that scales horizontally when the user resizes text. Next we'll apply a percentage width to the input element. For this element a percentage is used rather than ems. Using ems in this case would create a width that doesn't appear to make sense. This is due to the fact that the font-size already applied to the element will change the em value for the element. To get around this problem we use a percentage wich provides results that appear as we would expect. This has the added benefit of making the code easier to understand (without getting out a calculator) if another developer has to work on it at a later date.

Next we move on to the submit button. My first instinct is to attempt to resize the default submit button using CSS. Unfortunately most browsers do not support manipulation of the default height of a submit button. Firefox and IE allow us to give the button a height in pixels, but don't allow the use of ems. The solution to our problem is padding. Oftentimes padding can be used to force an element to take a certain height when all other methods fail. The combination of font size and padding gives our submit box its height, while still allowing the element to be resizable. To finish out the look we give the submit box a stylized border and background color.

We're almost done, but there is an issue due to Internet Explorer's misinterpretation of the box model. Rather than changing the code that other browsers use to force IE to cooperate, I prefer to use conditional comments. Because both IE 6 and 7 misinterpret the code in the same way, this modification can be contained in one single file.

A completed example can be viewed here.

This method has been tested in Firefox 2.0 Mac, Safari 3.0 Beta Mac, Internet Explorer 6 and 7. Please let me know if you notice have any problems using this method with other browsers.