Styling Forms with CSS – Part 1: Accessibility and Form Element Styles

Default Form Field Appearance

You should know that your form elements differ in their default appearance from operating system to operating system—and not only from Windows to Mac OS but from Windows version to Windows version. Although the default appearance of form elements was greatly improved in Windows XP, don't let this fool you. They still look as bad as they ever did in earlier systems, so it is always a good idea to style your forms specifically no matter how they appear in your own browser.

Zeroing Element Default Values

Forms also carry default values that differ from browser to browser. So that you start from a level playing field, you will need to open your style sheet with the zeroing selector that I explain in a different tutorial. The zeroing selector does exactly what it says: It zeroes all the elements' default values—not only those that exist on your form elements but all elements across the board. You can do this in one of two ways:

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {  
margin: 0; 
padding: 0; 
border: 0; 
}

Alternatively:

* {
margin: 0; 
padding: 0; 
border: 0; 
}

These two code snippets are what I term "zeroing selectors." Each is designed to remove the default padding, margin, and border values from all elements across the board. The second zeroing selector uses the "*" wildcard character. Both alternatives should provide you with exactly the same outcome: the removal of all your browser's default values.

Internet Explorer and Styling Forms

As you may have guessed, Internet Explorer does not always get the styling of forms quite right. I therefore recommend that you add an Internet Explorer–specific style sheet using conditional comments (CCs), which I cover in a different tutorial. This special style sheet is included in the sample download file that accompanies this tutorial and the CC that is required is also in place within the head section of each document.

Sometimes Internet Explorer simply ignores the functionality and styling of some form elements. Other times it just gets things wrong. Of course, it also gets more than a few things right. For the purpose of this series, please do all your testing in the Firefox browser. Apart from anywhere the tutorial indicates, you should use Firefox as your default browser.

Page 3 of 7

Previous Page

Next Page