Designing web forms is a very common task for a web designer, but unfortunately there is a lot of room for hair loss here. I have read more than once in Jennifer’s articles, that you cannot have pixel-perfect designs across browsers. I completely agree and that statement is even more important when it comes to styling web forms and their form controls.
In some cases, as I will illustrate below, it might be useful to alter the box-sizing property of certain elements. However, according to caniuse.com, in versions of Internet Explorer lower than 8 and versions of Opera older than 9.5, it is not supported (you will also need to use vendor-specific prefixes for older Gecko and Webkit browsers). Due to that, this might not be a viable solution for now.
While writing this article I have used the desktop versions of the five most common web browsers—Internet Explorer, Firefox, Chrome, Safari and Opera. Due to the lack of better testing equipment, I have limited myself to their Windows 7 versions (which is why I haven’t tested with Konqueror either). So, let’s look at the different categories of controls.
Text, Password, Image Inputs and Textareas
They are all mostly straightforward. By default, they use the content-box sizing model. In the case of TEXTAREA elements, you may have noticed that newer versions of Firefox, Chrome and Safari will display a resize handle in the bottom right corner of the element. This feature may break your design, for instance if the user decides to make the TEXTAREA too large. You can solve this problem by using the min-width, max-width, min-height and max-height properties to make limits beyond which the user cannot resize.
Selects, Buttons, Submits, and Resets
The main difference between these elements and the previous group is that buttons use the border-box sizing model in all modern browsers. That fact is truly unfortunate and the reason behind this dichotomy still escapes me. It becomes a nasty problem when you want to match the height of a button with, for example, a text input (in case it has padding and/or borders). You can try the box-sizing property for an easy fix to this problem. Otherwise, you can just calculate and set the height of the buttons to be equal to the height of the text inputs, plus their padding and border width, if that is possible. If you use only pixels or any other single type of measurement for all your sizing properties, this solution will work just fine. Otherwise you might need to use the “calc()” notation to get a good result, but the browser support for it is currently very limited, so I would advise against this, for now.
Checkboxes and Radio Buttons
These elements are almost impossible to style. This is why some people resort to using JavaScript for some nicer looking alternatives. However, some browsers do react to certain CSS stimuli for checkboxes and radio buttons. Firefox, Safari and Chrome are all bulletproof—you cannot do anything there, you can only modify the amount of empty space around a checkbox with the width and height properties. So, let’s look at Internet Explorer and Opera. If you do not like the new sleek Windows 7 styling, you can bring about something ancient (raw solid borders, rounded with the radio buttons) by setting any background-color for the element. In Internet Explorer, this will also work by applying a custom border (rounded corners will work with it). In IE, The custom border will appear as a second one around the checkbox or radio button, but the actual color of the radio button or checkbox will not be changed. In Opera, the custom border will instead substitute the one of the checkbox, but with the radio button—it will display an outer border, and inside, a small weird circle-like glyph will appear. The glyph still changes color if the button is selected. Setting the background-color will change the color of the area surrounding the element in IE, and in Opera it will actually change the background color inside the border. In addition to that, in Opera, the color property will change the selected color of the glyph inside the element, if you have set the background-color or made a custom border. But honestly, I believe that it is not worth delving into these obscure possibilities when dealing with checkboxes and radio buttons.
Part 2: File Input, Option, and HTML5 Form Fields
In Part 2: File Input, Option, and HTML5 Form Fields you will learn how the box model is implemented on file upload input fields, OPTION drop-down menus, and the new HTML5 form fields.
