O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


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

by Christopher Schmitt
CSS Cookbook, Third Edition book cover

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.

buy button

 

 

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:

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

Testing the background color of checkboxes

background-image

Figure E.2. Testing background images in checkboxes

Testing background images in checkboxes


border: 0;

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

Testing the removal of borders from checkboxes

border-color

Figure E.4. Testing colors on the checkbox borders

Testing colors on the checkbox borders

border-style

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

Testing the styles of borders on checkboxes

border-width

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

Testing the widths of borders on checkboxes

color

Figure E.7. Testing the color of checkboxes

Testing the color of checkboxes

font-family

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

Testing setting a different font on checkboxes

font-size

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

Testing a different size of font on checkboxes

font-weight

Figure E.10. Testing a bold font on checkboxes

Testing a bold font on checkboxes

height

Figure E.11. Testing setting a height on checkboxes

Testing setting a height on checkboxes


letter-spacing

Figure E.12. Testing the letter spacing on checkboxes

Testing the letter spacing on checkboxes


line-height

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

Testing setting the spacing between lines of text on checkboxes


margin

Figure E.14. Testing margins on checkboxes

Testing margins on checkboxes


padding

Figure E.15. Testing padding on checkboxes

Testing padding on checkboxes


text-align

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

Testing the alignment of text on checkboxes


text-decoration

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

Testing setting a different font on checkboxes


text-indent

Figure E.18. Testing indenting the text on checkboxes

Testing indenting the text on checkboxes


width

Figure E.19. Testing the width of checkboxes

Testing the width of checkboxes


word-spacing

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

Testing the spacing between words on checkboxes



Input Element for File Uploads

Also known as file select, this form element allows users to pick a file from their computer for submission along with a form.

Table E.3. A review of the CSS properties on file upload

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

Y

Y

N

N

background-image

Y

Y

Y

Y

N

N

border

Y

Y

Y

N

N

N

border-color

Y

Y

Y

S

N

N

border-style

Y

Y

Y

Y

N

N

border-width

Y

Y

Y

N

N

N

color

N

N

N

Y

N

N

font-family

N

N

N

Y

N

N

font-size

Y

Y

Y

Y

Y

Y

font-weight

N

N

N

Y

N

N

height

Y

Y

Y

S

S

S

letter-spacing

N

N

N

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

N

N

N

N

text-align

N

N

N

N

N

N

text-decoration

N

N

N

Y

N

N

text-indent

Y

Y

N

Y

Y

Y

width

Y

Y

Y

Y

S

S

word-spacing

N

N

N

Y

N

N

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

N

N

N

N

border-color

S

S

S

S

S

S

border-style

Y

Y

Y

Y

Y

Y

border-width

S

S

N

N

N

N

color

Y

N

Y

Y

Y

Y

font-family

Y

Y

N

N

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

S

S

S

S

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

N

N

N

N

text-align

N

N

N

N

N

N

text-decoration

N

N

Y

Y

Y

Y

text-indent

N

N

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

Y

Y

S

S

 



background-color

Figure E.21. Testing the background color of file input

Testing the background color of file input


background-image

Figure E.22. Testing background images in file input

Testing background images in file input


border: 0;

Figure E.23. Testing the removal of borders on file input

Testing the removal of borders on file input


border-color

Figure E.24. Testing colors on the file input borders

Testing colors on the file input borders


border-style

Figure E.25. Testing the styles of borders of file input

Testing the styles of borders of file input


border-width

Figure E.26. Testing the widths of borders on file input

Testing the widths of borders on file input


color

Figure E.27. Testing the color on file input

Testing the color on file input


font-family

Figure E.28. Testing setting a different font on file input

Testing setting a different font on file input


font-size

Figure E.29. Testing a different size of font on file input

Testing a different size of font on file input


font-weight

Figure E.30. Testing a bold font on file input

Testing a bold font on file input


height

Figure E.31. Testing setting a height for file input

Testing setting a height for file input


letter-spacing

Figure E.32. Testing the letter spacing of file input

Testing the letter spacing of file input


line-height

Figure E.33. Testing setting the spacing between lines of text on file input

Testing setting the spacing between lines of text on file input


margin

Figure E.34. Testing margins on file input

Testing margins on file input


padding

Figure E.35. Testing padding on file input

Testing padding on file input


text-align

Figure E.36. Testing the alignment of text on file input

Testing the alignment of text on file input


text-decoration

Figure E.37. Testing setting a different font on file input

Testing setting a different font on file input


text-indent

Figure E.38. Testing indenting the text on file input

Testing indenting the text on file input


width

Figure E.39. Testing the width of file input

Testing the width of file input


word-spacing

Figure E.40. Testing the spacing between words on file input

Testing the spacing between words on file input


Input Element for Radio Buttons

Like checkboxes, radio buttons provide on/off options for a grouping. However, unlike checkboxes, which can take more than one value, a radio button is used when only one option out of a group is allowed to be submitted.

Table E.4. A review of the CSS properties on radio buttons

 

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

NA

NA

NA

NA

NA

NA

font-weight

NA

NA

NA

NA

NA

NA

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

Y

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

S

S

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

NA

NA

NA

NA

NA

NA

font-weight

NA

NA

NA

NA

NA

NA

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

S

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.41. Testing the background color of radio buttons

Testing the background color of radio buttons


background-image

Figure E.42. Testing background images in radio buttons

Testing background images in radio buttons


border: 0;

Figure E.43. Testing the removal of borders on radio buttons

Testing the removal of borders on radio buttons


border-color

Figure E.44. Testing colors on the radio button borders

Testing colors on the radio button borders


border-style

Figure E.45. Testing the styles of borders on radio buttons

Testing the styles of borders on radio buttons


border-width

Figure E.46. Testing the widths of borders on radio buttons

Testing the widths of borders on radio buttons


color

Figure E.47. Testing the color on radio buttons

Testing the color on radio buttons


font-family

Figure E.48. Testing setting a different font on radio buttons

Testing setting a different font on radio buttons


font-size

Figure E.49. Testing a different size of font on radio buttons

Testing a different size of font on radio buttons


font-weight

Figure E.50. Testing a bold font on radio buttons

Testing a bold font on radio buttons


height

Figure E.51. Testing setting a height for radio buttons

Testing setting a height for radio buttons


letter-spacing

Figure E.52. Testing the letter spacing of radio buttons

Testing the letter spacing of radio buttons


line-height

Figure E.53. Testing setting the spacing between lines of text on radio buttons

Testing setting the spacing between lines of text on radio buttons


margin

Figure E.54. Testing margins on radio buttons

Testing margins on radio buttons


padding

Figure E.55. Testing padding on radio buttons

Testing padding on radio buttons


text-align

Figure E.56. Testing the alignment of text on radio buttons

Testing the alignment of text on radio buttons


text-decoration

Figure E.57. Testing setting a different font on radio buttons

Testing setting a different font on radio buttons


text-indent

Figure E.58. Testing indenting the text on radio buttons

Testing indenting the text on radio buttons


width

Figure E.59. Testing the width of radio buttons

Testing the width of radio buttons


word-spacing

Figure E.60. Testing the spacing between words on radio buttons

Testing the spacing between words on radio buttons


Input Element for Text

The input element allows users to submit a single line of text.

Table E.5. A review of the CSS properties on text fields

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

Y

Y

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

Y

Y

Y

Y

text-align

N

N

N

N

N

N

text-decoration

Y

Y

Y

Y

Y

Y

text-indent

S

S

S

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

Y

Y

Y

Y

Y

Y

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

Y

Y

Y

Y

text-align

N

N

N

N

N

N

text-decoration

N

N

Y

Y

Y

Y

text-indent

Y

Y

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

Y

Y

Y

Y

 



background-color

Figure E.61. Testing the background color of text fields

Testing the background color of text fields


background-image

Figure E.62. Testing background images in text fields

Testing background images in text fields


border: 0;

Figure E.63. Testing the removal of borders on text fields

Testing the removal of borders on text fields


border-color

Figure E.64. Testing colors on the text field borders

Testing colors on the text field borders


border-style

Figure E.65. Testing the styles of borders on text fields

Testing the styles of borders on text fields


border-width

Figure E.66. Testing the widths of borders on text fields

Testing the widths of borders on text fields


color

Figure E.67. Testing the color on text fields

Testing the color on text fields


font-family

Figure E.68. Testing setting a different font on text fields

Testing setting a different font on text fields


font-size

Figure E.69. Testing a different size of font on text fields

Testing a different size of font on text fields


font-weight

Figure E.70. Testing a bold font on text fields

Testing a bold font on text fields


height

Figure E.71. Testing setting a height for text fields

Testing setting a height for text fields


letter-spacing

Figure E.72. Testing the letter spacing of text fields

Testing the letter spacing of text fields


line-height

Figure E.73. Testing setting the spacing between lines of text on text fields

Testing setting the spacing between lines of text on text fields


margin

Figure E.74. Testing margins on text fields

Testing margins on text fields


padding

Figure E.75. Testing padding on text fields

Testing padding on text fields


text-align

Figure E.76. Testing the alignment of text on text fields

Testing the alignment of text on text fields


text-decoration

Figure E.77. Testing setting a different font on text fields

Testing setting a different font on text fields


text-indent

Figure E.78. Testing indenting the text on text fields

Testing indenting the text on text fields


width

Figure E.79. Testing the width of text fields

Testing the width of text fields


word-spacing

Figure E.80. Testing the spacing between words on text fields

Testing the spacing between words on text fields


Select Element for Multiple Options

The select element allows users to select multiple options presented in a scrollable, vertical listing.

Table E.6. A review of the CSS properties on the select element with multiple options showing

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

Y

Y

Y

Y

background-image

N

N

Y

Y

Y

Y

border

N

N

Y

Y

Y

Y

border-color

N

N

N

Y

Y

Y

border-style

N

N

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

S

S

Y

Y

Y

Y

letter-spacing

N

N

N

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

N

N

Y

Y

Y

Y

text-align

N

N

N

N

Y

Y

text-decoration

Y

Y

Y

N

N

N

text-indent

S

S

N

N

N

N

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

N

Y

Y

Y

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

N

N

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

S

S

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

Y

Y

Y

Y

text-align

Y

Y

N

N

N

N

text-decoration

N

N

N

N

N

N

text-indent

N

N

N

N

N

N

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

Y

Y

Y

Y

 



background-color

Figure E.81. Testing the background color of a select element with multiple options

Testing the background color of a select element with multiple options


background-image

Figure E.82. Testing background images in a select element with multiple options

Testing background images in a select element with multiple options


border: 0;

Figure E.83. Testing the removal of borders on a select element with multiple options

Testing the removal of borders on a select element with multiple options


border-color

Figure E.84. Testing of border colors on a select element with multiple options

Testing of border colors on a select element with multiple options


border-style

Figure E.85. Testing the styles of borders on a select element with multiple options

Testing the styles of borders on a select element with multiple options


border-width

Figure E.86. Testing the widths of borders on a select element with multiple options

Testing the widths of borders on a select element with multiple options


color

Figure E.87. Testing the color on a select element with multiple options

Testing the color on a select element with multiple options


font-family

Figure E.88. Testing setting a different font on a select element with multiple options

Testing setting a different font on a select element with multiple options


font-size

Figure E.89. Testing a different size of font on a select element with multiple options

Testing a different size of font on a select element with multiple options


font-weight

Figure E.90. Testing a bold font on a select element with multiple options

Testing a bold font on a select element with multiple options


height

Figure E.91. Testing setting a height for a select element with multiple options

Testing setting a height for a select element with multiple options


letter-spacing

Figure E.92. Testing the letter spacing of a select element with multiple options

Testing the letter spacing of a select element with multiple options


line-height

Figure E.93. Testing setting the spacing between lines of text on a select element with multiple options

Testing setting the spacing between lines of text on a select element with multiple options


margin

Figure E.94. Testing margins on a select element with multiple options

Testing margins on a select element with multiple options


padding

Figure E.95. Testing padding on a select element with multiple options

Testing padding on a select element with multiple options


text-align

Figure E.96. Testing the alignment of text on a select element with multiple options

Testing the alignment of text on a select element with multiple options


text-decoration

Figure E.97. Testing setting a different font on a select element with multiple options

Testing setting a different font on a select element with multiple options


text-indent

Figure E.98. Testing indenting the text on a select element with multiple options

Testing indenting the text on a select element with multiple options


width

Figure E.99. Testing the width of a select element with multiple options

Testing the width of a select element with multiple options


word-spacing

Figure E.100. Testing the spacing between words on a select element with multiple options

Testing the spacing between words on a select element with multiple options


Select Element for Single Options

A select element is a form element that shows only one available option at a time. When a user interacts with the element, multiple options are available for selecting, but only one option may be submitted.

Table E.7. A review of the CSS properties on select elements with one option showing

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

N

Y

Y

Y

background-image

N

N

Y

N

N

N

border

N

N

Y

Y

Y

Y

border-color

N

N

N

Y

Y

Y

border-style

N

N

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

N

N

Y

Y

Y

Y

letter-spacing

N

N

N

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

N

N

Y

Y

Y

Y

text-align

N

N

N

N

N

N

text-decoration

Y

Y

Y

Y

N

N

text-indent

S

S

N

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

N

Y

Y

Y

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

N

Y

Y

Y

Y

border

Y

Y

S

S

S

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

N

N

N

Y

font-family

Y

Y

N

N

N

Y

font-size

Y

Y

N

N

N

Y

font-weight

Y

Y

N

N

N

Y

height

Y

Y

N

N

N

N

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

N

N

N

N

text-align

N

N

N

N

N

N

text-decoration

N

N

Y

Y

Y

Y

text-indent

Y

Y

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

Y

Y

Y

Y

 



background-color

Figure E.101. Testing the background color of a select element

Testing the background color of a select element


background-image

Figure E.102. Testing background images in a select element

Testing background images in a select element


border: 0;

Figure E.103. Testing the removal of borders on a select element

Testing the removal of borders on a select element


border-color

Figure E.104. Testing colors on the select element borders

Testing colors on the select element borders


border-style

Figure E.105. Testing the styles of borders on a select element

Testing the styles of borders on a select element


border-width

Figure E.106. Testing the widths of borders on a select element

Testing the widths of borders on a select element


color

Figure E.107. Testing the color on a select element

Testing the color on a select element


font-family

Figure E.108. Testing setting a different font on a select element

Testing setting a different font on a select element


font-size

Figure E.109. Testing a different size of font on a select element

Testing a different size of font on a select element


font-weight

Figure E.110. Testing a bold font on a select element

Testing a bold font on a select element


height

Figure E.111. Testing setting a height for a select element

Testing setting a height for a select element


letter-spacing

Figure E.112. Testing the letter spacing of a select element

Testing the letter spacing of a select element


line-height

Figure E.113. Testing setting the spacing between lines of text on a select element

Testing setting the spacing between lines of text on a select element


margin

Figure E.114. Testing margins on a select element

Testing margins on a select element


padding

Figure E.115. Testing padding on a select element

Testing padding on a select element


text-align

Figure E.116. Testing the alignment of text on a select element

Testing the alignment of text on a select element


text-decoration

Figure E.117. Testing setting a different font on a select element

Testing setting a different font on a select element


text-indent

Figure E.118. Testing indenting the text on a select element

Testing indenting the text on a select element


width

Figure E.119. Testing the width of a select element

Testing the width of a select element


word-spacing

Figure E.120. Testing the spacing between words on a select element

Testing the spacing between words on a select element


Submit Element

When activated, the Submit button simply submits the form.

Table E.8. A review of the CSS properties on the Submit button

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

Y

Y

Y

Y

background-image

N

N

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

Y

Y

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

Y

Y

N

Y

text-align

Y

Y

N

N

N

N

text-decoration

Y

Y

Y

N

N

N

text-indent

S

S

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

Y

Y

Y

Y

Y

Y

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

N

N

N

Y

font-size

Y

Y

N

N

N

Y

font-weight

Y

Y

N

N

N

Y

height

Y

Y

N

N

N

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

N

N

N

N

N

N

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

N

N

N

Y

text-align

N

N

N

N

N

N

text-decoration

N

N

Y

Y

Y

Y

text-indent

Y

Y

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

N

N

Y

Y

Y

Y

 



background-color

Figure E.121. Testing the background color of the Submit button

Testing the background color of the Submit button


background-image

Figure E.122. Testing background images in the Submit button

Testing background images in the Submit button


border: 0;

Figure E.123. Testing the removal of borders on the Submit button

Testing the removal of borders on the Submit button


border-color

Figure E.124. Testing colors on the Submit button borders

Testing colors on the Submit button borders


border-style

Figure E.125. Testing the styles of borders on the Submit button

Testing the styles of borders on the Submit button


border-width

Figure E.126. Testing the widths of borders on the Submit button

Testing the widths of borders on the Submit button


color

Figure E.127. Testing the color on the Submit button

Testing the color on the Submit button


font-family

Figure E.128. Testing setting a different font on the Submit button

Testing setting a different font on the Submit button


font-size

Figure E.129. Testing a different size of font on the Submit button

Testing a different size of font on the Submit button


font-weight

Figure E.130. Testing a bold font on the Submit button

Testing a bold font on the Submit button


height

Figure E.131. Testing setting a height for the Submit button

Testing setting a height for the Submit button


letter-spacing

Figure E.132. Testing the letter spacing of the Submit button

Testing the letter spacing of the Submit button


line-height

Figure E.133. Testing setting the spacing between lines of text on the Submit button

Testing setting the spacing between lines of text on the Submit button


margin

Figure E.134. Testing margins on the Submit button

Testing margins on the Submit button


padding

Figure E.135. Testing padding on the Submit button

Testing padding on the Submit button


text-align

Figure E.136. Testing the alignment of text on the Submit button

Testing the alignment of text on the Submit button


text-decoration

Figure E.137. Testing setting a different font on the Submit button

Testing setting a different font on the Submit button


text-indent

Figure E.138. Testing indenting the text on the Submit button

Testing indenting the text on the Submit button


width

Figure E.139. Testing the width of the Submit button

Testing the width of the Submit button


word-spacing

Figure E.140. Testing the spacing between words on the Submit button

Testing the spacing between words on the Submit button


Textarea Element

A textarea element is an HTML form element that allows for multiline text input by the user.

Table E.9. A review of the CSS properties on textarea

 

WinIE6

WinIE7

WinIE8b2

Chrome

MacFF3

WinFF3

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

Y

Y

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

N

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

Y

Y

Y

Y

Y

Y

margin

Y

Y

Y

Y

Y

Y

padding

S

S

Y

Y

Y

Y

text-align

Y

Y

Y

Y

Y

Y

text-decoration

Y

Y

Y

Y

Y

Y

text-indent

S

S

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

Y

Y

Y

Y

Y

Y

 

 

MacOP9

WinOP9

MacSF3

WinSF3

MacSF4b

WinSF4b

background-color

Y

Y

Y

Y

Y

Y

background-image

Y

Y

Y

Y

Y

Y

border

Y

Y

Y

Y

Y

Y

border-color

Y

Y

Y

Y

Y

Y

border-style

Y

Y

Y

Y

Y

Y

border-width

N

N

Y

Y

Y

Y

color

Y

Y

Y

Y

Y

Y

font-family

Y

Y

Y

Y

Y

Y

font-size

Y

Y

Y

Y

Y

Y

font-weight

Y

Y

Y

Y

Y

Y

height

Y

Y

Y

Y

Y

Y

letter-spacing

Y

Y

Y

Y

Y

Y

line-height

Y

Y

N

N

N

Y

margin

Y

Y

Y

Y

Y

Y

padding

Y

Y

Y

Y

Y

Y

text-align

Y

Y

Y

Y

Y

Y

text-decoration

N

N

Y

Y

Y

Y

text-indent

N

N

Y

Y

Y

Y

width

Y

Y

Y

Y

Y

Y

word-spacing

Y

Y

Y

Y

Y

Y

 



background-color

Figure E.141. Testing the background color of the textarea element

Testing the background color of the textarea element


background-image

Figure E.142. Testing background images in the textarea element

Testing background images in the textarea element


border: 0;

Figure E.143. Testing the removal of borders on the textarea element

Testing the removal of borders on the textarea element


border-color

Figure E.144. Testing colors on the textarea element borders

Testing colors on the textarea element borders


border-style

Figure E.145. Testing the styles of borders on the textarea element

Testing the styles of borders on the textarea element


border-width

Figure E.146. Testing the widths of borders on the textarea element

Testing the widths of borders on the textarea element


color

Figure E.147. Testing the color on the textarea element

Testing the color on the textarea element


font-family

Figure E.148. Testing setting a different font on the textarea element

Testing setting a different font on the textarea element


font-size

Figure E.149. Testing a different size of font on the textarea element

Testing a different size of font on the textarea element


font-weight

Figure E.150. Testing a bold font on the textarea element

Testing a bold font on the textarea element


height

Figure E.151. Testing setting a height for the textarea element

Testing setting a height for the textarea element


letter-spacing

Figure E.152. Testing the letter spacing of the textarea element

Testing the letter spacing of the textarea element


line-height

Figure E.153. Testing setting the spacing between lines of text on the textarea element

Testing setting the spacing between lines of text on the textarea element


margin

Figure E.154. Testing margins on the textarea element

Testing margins on the textarea element


padding

Figure E.155. Testing padding on the textarea element

Testing padding on the textarea element


text-align

Figure E.156. Testing the alignment of text on the textarea element

Testing the alignment of text on the textarea element


text-decoration

Figure E.157. Testing setting a different font on the textarea element

Testing setting a different font on the textarea element


text-indent

Figure E.158. Testing indenting the text on the textarea element

Testing indenting the text on the textarea element


width

Figure E.159. Testing the width of the textarea element

Testing the width of the textarea element


word-spacing

Figure E.160. Testing the spacing between words on the textarea element

Testing the spacing between words on the textarea element

If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition.

Copyright © 2009 O'Reilly Media, Inc.