Form Markup, Usability, and Accessibility
Before you style a form, you need to know how to mark it up properly in a way that will not only maximize your styling options with CSS, but keep it usable and accessible for your users.
Laying out Forms with CSS
The following links give examples and/or instructions on how to lay out forms without tables. They don't necessarily cover how to style the form elements themselves (see the next section on this page for those links).
Styling Form Elements
There is a limited amount of styling that you can do to form elements, and this varies by browser. This is because form elements are still controlled by the OS to some degree. In some browsers, this tie is greater than others. Many argue that it is good that forms can't be styled too radically because it would hurt usability to do so -- users rely on an input element looking like an input element so they know what action to take.
Adding height to input and select elements
A few notes regarding styling input and select elements with height.
In my brief testing, only Opera seems to deal with flexible height settings on these elements.
For instance, I have styled my input and select items with {height: 2em;} with the following results:
- Firefox 1.0 - sets initial height of both correctly, but fails to grow the height of either element if the text size is increased. This results in text within both elements getting cut off at the bottom. This can be solved by reloading the page.
- Opera 7.54 - Scales everything as expected.
- IE 6 - appears to ignore height on the select boxes, yet it will scale the selects down (but not up as far as I can tell). Appears to set the initial height correctly for the input box, but only scales it down, not up. Since you can't "scale" IE much via font size anyhow, it doesn't appear to be a big problem for it.
- Netscape 7.2 - Sets the initial height correctly for both selects and inputs, but does not scale either of them down or up.
Note that not adding height to these elements produces the same results as above.
Scalable text sizes for input fields and buttons
If your goal is having form fields that get larger (or smaller) when the user changes the browser text size, try this:
input {
font-size:0.8em; /* whatever default font size you want */
}
This should give you scalable form elements when changing the browser text size in IE, Firefox, etc. Apparently, form elements and their text do not scale in those browsers unless a font-size attribute is added.
Form Styling Bugs
- Firefox 1.0 - Disregards viewport wrapping of floated elements inside a floated fieldset. Also ignores max-width on floated fieldsets. Also will shrink individual table cell widths to cell contents on floated or inline tables. Hmm... basically fieldsets are incredibly buggy in Firefox and will drive you insane.
- Internet Explorer 6 - For limiting the width of select (combo boxes), it ignores the setting of the max-width CSS property. Nevertheless the width property works, but unlike Firefox, the popup listbox of the combo will be cropped horizontally.
- Internet Explorer 6 - Combo boxes don't remain under absolutely positioned elements, they are always at the top. Other form elements (checkboxed, radio buttons, ...) behave ok. Firefox 1.0 doesn't exhibit this bug.
- Internet Explorer 6 adds extra padding to long buttons. Fix: http://jehiah.com/archive/button-width-in-ie
- Internet Explorer 6 allows the background color of fieldsets to bleed out behind the legend. Fix: http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie
- Safari and Shiira - Can't use "transparent" value on input boxes.
- Be aware that Internet Explorer until 6 (maybe 7, too) resets the value of a selectbox when clicking on a label that is combined with the selectbox (important to know especially for selects with preselected values (e.g. on an "update" form)