Popular Topics: Programming JavaScript iPhone Android Python Head First HTML5 & CSS Microsoft Java Perl Linux Data

Styling Form Elements: Appendix E - CSS Cookbook, Third Edition

This excerpt is from CSS Cookbook, Third Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

With the impact that forms have on our day-to-day Internet commerce and lifestyle, forms are always in the foreground of website design.

Web designers want to control the look and feel of form elements in their web page design so that they are more appealing to their audience and also fit in with the rest of the design.

The problem is that browsers manipulate the visual display of form elements from one browser to the next. Even the same browser version can display a form element differently on separate operating systems.

This appendix covers how browsers don’t render form controls consistently. Since there are about 10 browsers and 20 CSS properties reviewed, as well as 8 HTML form elements, the entire appendix is too large to print. So, we took it to the Internet and made it available online for free. If you’re viewing this appendix as a standalone piece online, you can access the full book here: http://oreilly.com/catalog/9780596155933/.

Anatomy of the Appendix

The first part of this appendix lists the properties and their respective values that were tested (as shown in Table E.1, “The properties and their values used in testing form elements”).

The second part examines eight form elements and how they can be modified using 20 CSS properties (listed in Table E.1, “The properties and their values used in testing form elements”) in 10 different browsers:

Checkboxes, as shown in Table E.2, “A review of the CSS properties on checkboxes” and Figure E.1, “Testing the background color of checkboxes” to Figure E.20, “Testing the spacing between words on checkboxes”
File upload, as shown in Table E.3, “A review of the CSS properties on file upload” and Figure E.21, “Testing the background color of file input” to Figure E.40, “Testing the spacing between words on file input”
Radio buttons, as shown in Table E.4, “A review of the CSS properties on radio buttons” and Figure E.41, “Testing the background color of radio buttons” to Figure E.60, “Testing the spacing between words on radio buttons”
Input text, as shown in Table E.5, “A review of the CSS properties on text fields” and Figure E.61, “Testing the background color of text fields” to Figure E.80, “Testing the spacing between words on text fields”
Select with multiple items, as shown in Table E.6, “A review of the CSS properties on the select element with multiple options showing” and Figure E.81, “Testing the background color of a select element with multiple options” to Figure E.100, “Testing the spacing between words on a select element with multiple options”
Select with an individual item, as shown in Table E.7, “A review of the CSS properties on select elements with one option showing” and Figure E.101, “Testing the background color of a select element” to Figure E.120, “Testing the spacing between words on a select element”
Submit button, as shown in Table E.8, “A review of the CSS properties on the Submit button” and Figure E.121, “Testing the background color of the Submit button” to Figure E.140, “Testing the spacing between words on the Submit button”
Textarea, as shown in Table E.9, “A review of the CSS properties on textarea” and Figure E.141, “Testing the background color of the textarea element” to Figure E.160, “Testing the spacing between words on the textarea element”

The values used in Tables E.2 to E.9 include NA, Y, N, and S.

NA stands for Not Available (meaning that the CSS property does not apply to the form element), Y for Yes (meaning that the CSS property’s value is properly applied), N for No (meaning that the CSS property’s value was not applied), and S for Somewhat (meaning that some part of the CSS property’s value is being applied).

Note

The Somewhat value marks unusual situations. There are points within the HTML and CSS specifications that do not define a certain behavior, and therefore determination of a CSS rule’s successful application becomes difficult.

For example, Firefox expands the width of the input field as well as the space between letters when using the letter-spacing property.

In this instance, the discrepancy could be due to Firefox calculating the default width of the input field on a certain number of characters, whereas the other browsers could be basing the width on a predetermined value or an unadjusted number of characters at the font size of the input field.

Tested CSS Properties

Table E.1. The properties and their values used in testing form elements

Property	Value
`background-color`	`#ccff00;`
`background-image`	`url(checkerboard_bkgd.gif);`
`border`	`0;`
`border-color`	`1px solid red;`
`border-style`	`groove;`
`border-width`	`24px;`
`color`	`#00ccff;`
`font-family`	`Georgia, Times, 'Times New Roman', serif;`
`font-size`	`24px;`
`font-weight`	`bold;`
`height`	`100px;`
`letter-spacing`	`24px;`
`line-height`	`1.5;`
`margin`	`24px;`
`padding`	`24px;`
`text-align`	`right;`
`text-decoration`	`underline;`
`text-indent`	`24px;`
`width`	`100px;`
`word-spacing`	`24px;`

Input Element for Checkboxes

A checkbox element is a form element, which allows on/off selections for one or multiple items for a grouping. An example of a checkbox is one that lets you select which ingredients you would like on a pizza.

Table E.2. A review of the CSS properties on checkboxes

	WinIE6	WinIE7	WinIE8b2	Chrome	MacFF3	WinFF3
`background-color`	S	S	S	N	N	N
`background-image`	S	S	S	N	N	N
`border`	N	N	N	N	N	N
`border-color`	S	S	S	N	N	N
`border-style`	S	S	S	N	N	N
`border-width`	N	N	N	N	N	N
`color`	N	N	N	N	N	N
`font-family`	NA	NA	NA	NA	NA	NA
`font-size`	N	N	N	N	N	N
`font-weight`	N	N	N	N	N	N
`height`	S	S	S	S	N	S
`letter-spacing`	NA	NA	NA	NA	NA	NA
`line-height`	N	N	N	N	N	N
`margin`	Y	Y	Y	Y	Y	Y
`padding`	N	N	Y	N	N	N
`text-align`	NA	NA	NA	NA	NA	NA
`text-decoration`	NA	NA	NA	NA	NA	NA
`text-indent`	Y	S	N	N	N	N
`width`	S	S	S	S	N	S
`word-spacing`	NA	NA	NA	NA	NA	NA

	MacOP9	WinOP9	MacSF3	WinSF3	MacSF4b	WinSF4b
`background-color`	Y	Y	N	N	N	N
`background-image`	Y	Y	N	N	N	N
`border`	N	N	N	N	N	N
`border-color`	S	S	N	N	N	N
`border-style`	Y	Y	N	N	N	N
`border-width`	N	N	N	N	N	N
`color`	N	N	N	N	N	N
`font-family`	NA	NA	NA	NA	NA	NA
`font-size`	N	N	N	N	N	N
`font-weight`	N	N	N	N	N	N
`height`	S	S	S	S	S	S
`letter-spacing`	NA	NA	NA	NA	NA	NA
`line-height`	N	N	N	N	N	N
`margin`	Y	Y	Y	Y	Y	Y
`padding`	Y	Y	N	N	N	N
`text-align`	NA	NA	NA	NA	NA	NA
`text-decoration`	NA	NA	NA	NA	NA	NA
`text-indent`	N	N	N	N	N	N
`width`	S	S	S	S	S	S
`word-spacing`	NA	NA	NA	NA	NA	NA

background-color

Figure E.1. Testing the background color of checkboxes

background-image

Figure E.2. Testing background images in checkboxes

border: 0;

Figure E.3. Testing the removal of borders from checkboxes

border-color

Figure E.4. Testing colors on the checkbox borders

border-style

Figure E.5. Testing the styles of borders on checkboxes

border-width

Figure E.6. Testing the widths of borders on checkboxes

color

Figure E.7. Testing the color of checkboxes

font-family

Figure E.8. Testing setting a different font on checkboxes

font-size

Figure E.9. Testing a different size of font on checkboxes

font-weight

Figure E.10. Testing a bold font on checkboxes

height

Figure E.11. Testing setting a height on checkboxes

letter-spacing

Figure E.12. Testing the letter spacing on checkboxes

line-height

Figure E.13. Testing setting the spacing between lines of text on checkboxes

margin

Figure E.14. Testing margins on checkboxes

padding

Figure E.15. Testing padding on checkboxes

text-align

Figure E.16. Testing the alignment of text on checkboxes

text-decoration

Figure E.17. Testing setting a different font on checkboxes

text-indent

Figure E.18. Testing indenting the text on checkboxes

width

Figure E.19. Testing the width of checkboxes

word-spacing

Figure E.20. Testing the spacing between words on checkboxes