Styling of Form Elements

APPENDIX D Styling of Form Elements Forms have a big impact on our day-to-day Internet lifestyle, so designers want to control the look-and-feel of form elements in their web page designs. 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. To help web developers determine the best way to design web forms, this appendix documents a majority of the visual CSS properties and their effect on form elements in today’s modern browsers. The first part of this appendix lists the properties that were tested and their respective values in Table D-1. The second part examines eight form elements and how they can be modified using 20 of the CSS properties listed in Table D-1 in 10 different browsers: • Checkboxes, are shown in Table D-2 and Figures D-1 to D-20. • File Upload, is shown in Table D-3 and Figures D-21 to D-40. • Radio Buttons, are shown in Table D-4 and Figures D-41 to D-60. • Input Text, is shown in Table D-5 and Figures D-61 to D-80. • Select with Multiple Items, is shown in Table D-6 and Figures D-81 to D-100. • Select with Individual Item, is shown in Table D-7 and Figures D-101 to D-120. • Submit Button, is shown in Table D-8 and Figures D-121 to D-140. • Textarea, is shown in Table D-9 and Figures D-141 to D-160. The values used from Table D-2 to Table D-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 a meaning that the CSS property’s value was not applied and S for Somewhat meaning that there is some part of the CSS property’s value being applied. 477 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 be- comes 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 where- as 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. Table D-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; 478 | Appendix D: Styling of Form Elements Checkboxes background-color Figure D-1. Testing the background color of checkboxes Checkboxes | 479 background-image Figure D-2. Testing background images in checkboxes 480 | Appendix D: Styling of Form Elements border: 0; Figure D-3. Testing the removal of borders on checkboxes border: 0; | 481 border-color Figure D-4. Testing of colors on the checkbox borders 482 | Appendix D: Styling of Form Elements border-style Figure D-5. Testing the styles of borders on checkboxes border-style | 483 border-width Figure D-6. Testing the widths of borders on checkboxes 484 | Appendix D: Styling of Form Elements color Figure D-7. Testing the color on checkboxes color | 485 font-family Figure D-8. Testing to set a different font on checkboxes 486 | Appendix D: Styling of Form Elements font-size Figure D-9. Testing a different size of font on checkboxes font-size | 487 font-weight Figure D-10. Testing a bold font on checkboxes 488 | Appendix D: Styling of Form Elements height Figure D-11. Testing to set a height for checkboxes height | 489 letter-spacing Figure D-12. Testing the letter spacing of checkboxes 490 | Appendix D: Styling of Form Elements line-height Figure D-13. Testing setting the spacing between lines of text on checkboxes line-height | 491 margin Figure D-14. Testing margins on checkboxes 492 | Appendix D: Styling of Form Elements padding Figure D-15. Testing padding on checkboxes padding | 493 text-align Figure D-16. Testing the alignment of text 494 | Appendix D: Styling of Form Elements text-decoration Figure D-17. Testing to set a different font on checkboxes text-decoration | 495 text-indent Figure D-18. Testing indenting the text on checkboxes 496 | Appendix D: Styling of Form Elements width Figure D-19. Testing the width of checkboxes width | 497 word-spacing Figure D-20. Testing the spacing between words on checkboxes 498 | Appendix D: Styling of Form Elements T ab le D -2 . A r ev ie w o f t he C SS p ro pe rt ie s on c he ck bo xe s W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or S S S S N N N N N Y ba ck gr ou nd -i ma ge S S S S N N N N N Y bo rd er N N N N N N N N N N bo rd er -c ol or S S S S N N N N N Y bo rd er -s ty le S S S S N N N N N Y bo rd er -w id th N N N N N N N N N N co lo r N N N N N N N N N N fo nt -f am il y NA NA NA NA NA NA NA NA NA NA fo nt -s iz e N N N N N N N N N N fo nt -w ei gh t N N N N N N N N N N he ig ht S S S N N S Y S Y N le tt er -s pa ci ng NA NA NA NA NA NA NA NA NA NA li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g N N N N N N N N N Y te xt -a li gn NA NA NA NA NA NA NA NA NA NA te xt -d ec or at io n NA NA NA NA NA NA NA NA NA NA te xt -i nd en t Y Y Y S N N N N N N wi dt h S S S S S S Y S Y S wo rd -s pa ci ng NA NA NA NA NA NA NA NA NA NA word-spacing | 499 File Input background-color Figure D-21. Testing the background color of file input 500 | Appendix D: Styling of Form Elements background-image Figure D-22. Testing background images in file input background-image | 501 border: 0; Figure D-23. Testing the removal of borders on file input 502 | Appendix D: Styling of Form Elements border-color Figure D-24. Testing of colors on the file input borders border-color | 503 border-style Figure D-25. Testing the styles of borders on file input 504 | Appendix D: Styling of Form Elements border-widht Figure D-26. Testing the widths of borders on file input border-widht | 505 color Figure D-27. Testing the color on file input 506 | Appendix D: Styling of Form Elements font-family Figure D-28. Testing to set a different font on file input font-size Figure D-29. Testing a different size of font on file input font-family | 507 font-weight Figure D-30. Testing a bold font on file input 508 | Appendix D: Styling of Form Elements height Figure D-31. Testing to set a height for file inputlet height | 509 letter-spacing Figure D-32. Testing the letter spacing of file input line-height Figure D-33. Testing setting the spacing between lines of text on file input 510 | Appendix D: Styling of Form Elements margin Figure D-34. Testing margins on file input margin | 511 padding Figure D-35. Testing padding on file input 512 | Appendix D: Styling of Form Elements text-align Figure D-36. Testing the alignment of text on file input text-decoration Figure D-37. Testing to set a different font on file input text-align | 513 text-indent Figure D-38. Testing indenting the text on file input 514 | Appendix D: Styling of Form Elements width Figure D-39. Testing the width of file input width | 515 word-spacing Figure D-40. Testing the spacing between words on file input 516 | Appendix D: Styling of Form Elements T ab le D -3 . A r ev ie w o f t he C SS p ro pe rt ie s on fi le u pl oa d W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y N Y Y Y Y N ba ck gr ou nd -i ma ge Y Y Y Y N N N N N N bo rd er Y S Y Y N N N N N N bo rd er -c ol or Y Y Y Y N Y Y Y Y Y bo rd er -s ty le Y Y Y Y N N N N N Y bo rd er -w id th Y Y Y Y N N N N N S co lo r N N N N N N N N N N fo nt -f am il y N N N N N N N N N Y fo nt -s iz e Y Y Y Y N Y Y Y Y Y fo nt -w ei gh t N N N N N N N N N Y he ig ht Y Y Y Y N Y Y Y Y Y le tt er -s pa ci ng N N N N N N S N N N li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g Y Y Y Y N N N N N Y te xt -a li gn N N N N N S S S S N te xt -d ec or at io n N N N N N N N N N N te xt -i nd en t Y Y Y Y N Y Y Y Y N wi dt h Y Y Y Y Y S S S S Y wo rd -s pa ci ng N N N N N N S N S N word-spacing | 517 Radio Buttons background-color Figure D-41. Testing the background color of radio buttons 518 | Appendix D: Styling of Form Elements background-image Figure D-42. Testing background images in radio buttons background-image | 519 border: 0; Figure D-43. Testing the removal of borders on radio buttons 520 | Appendix D: Styling of Form Elements border-color Figure D-44. Testing of colors on the radio button borders border-color | 521 border-style Figure D-45. Testing the styles of borders on radio buttons 522 | Appendix D: Styling of Form Elements border-width Figure D-46. Testing the widths of borders on radio buttons border-width | 523 color Figure D-47. Testing the color on radio buttons 524 | Appendix D: Styling of Form Elements font-family Figure D-48. Testing to set a different font on radio buttons font-family | 525 font-size Figure D-49. Testing a different size of font on radio buttons 526 | Appendix D: Styling of Form Elements font-weight Figure D-50. Testing a bold font on radio buttons font-weight | 527 height Figure D-51. Testing to set a height for radio buttons 528 | Appendix D: Styling of Form Elements letter-spacing Figure D-52. Testing the letter spacing of radio buttons letter-spacing | 529 line-height Figure D-53. Testing setting the spacing between lines of text on radio buttons 530 | Appendix D: Styling of Form Elements margin Figure D-54. Testing margins on radio buttons margin | 531 padding Figure D-55. Testing padding on radio buttons 532 | Appendix D: Styling of Form Elements text-align Figure D-56. Testing the alignment of text on radio buttons text-align | 533 text-decoration Figure D-57. Testing to set a different font on radio buttons 534 | Appendix D: Styling of Form Elements text-indent Figure D-58. Testing indenting the text on radio buttons text-indent | 535 width Figure D-59. Testing the width of radio buttons 536 | Appendix D: Styling of Form Elements word-spacing Figure D-60. Testing the spacing between words on radio buttons word-spacing | 537 T ab le D -4 . A r ev ie w o f t he C SS p ro pe rt ie s on r ad io b ut to ns W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or S S S S N N N N N Y ba ck gr ou nd -im ag e S S S S N N S N S S bo rd er N N N N N N N N N N bo rd er -c ol or S S S S N N N N N S bo rd er -s ty le S S S S N N N N N S bo rd er -w id th N N N N N N N N N N co lo r N N N N N N N N N N fo nt -fa m ily NA NA NA NA NA NA NA NA NA NA fo nt -s ize N N N N N N N N N N fo nt -w ei gh t NA NA NA NA NA NA NA NA NA NA he ig ht S S S S N N Y S Y S le tte r-s pa cin g NA NA NA NA NA NA NA NA NA NA lin e- he ig ht N N N N N N N N N N m ar gi n Y Y Y Y Y Y Y Y Y Y pa dd in g N N N N N N N N N S te xt -a lig n NA NA NA NA NA NA NA NA NA NA te xt -d ec or at io n NA NA NA NA NA NA NA NA NA NA te xt -in de nt Y Y Y S N N N N N N w id th S S S S S N Y S Y S w or d- sp ac in g NA NA NA NA NA NA NA NA NA NA 538 | Appendix D: Styling of Form Elements Text Fields background-color Figure D-61. Testing the background color of text fields Text Fields | 539 background-image Figure D-62. Testing background images in text fields 540 | Appendix D: Styling of Form Elements border: 0; Figure D-63. Testing the removal of borders on text fields border: 0; | 541 border-color Figure D-64. Testing of colors on the text field borders 542 | Appendix D: Styling of Form Elements border-style Figure D-65. Testing the styles of borders on text fields border-style | 543 border-width Figure D-66. Testing the widths of borders on text fields 544 | Appendix D: Styling of Form Elements color Figure D-67. Testing the color on text fields color | 545 font-family Figure D-68. Testing to set a different font on text fields 546 | Appendix D: Styling of Form Elements font-size Figure D-69. Testing a different size of font on text fields font-size | 547 font-weight Figure D-70. Testing a bold font on text fields 548 | Appendix D: Styling of Form Elements height Figure D-71. Testing to set a height for text fields height | 549 letter-spacing Figure D-72. Testing the letter spacing of text fields line-height Figure D-73. Testing setting the spacing between lines of text on text fields 550 | Appendix D: Styling of Form Elements margin Figure D-74. Testing margins on text fields margin | 551 padding Figure D-75. Testing padding on text fields 552 | Appendix D: Styling of Form Elements text-align Figure D-76. Testing the alignment of text on text fields text-align | 553 text-decoration Figure D-77. Testing to set a different font on text fields 554 | Appendix D: Styling of Form Elements text-indent Figure D-78. Testing indenting the text on text fields text-indent | 555 width Figure D-79. Testing the width of text fields 556 | Appendix D: Styling of Form Elements word-spacing Figure D-80. Testing the spacing between words on text fields word-spacing | 557 T ab le D -5 . A r ev ie w o f t he C SS p ro pe rt ie s on te xt fi el ds W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y Y Y Y Y Y Y ba ck gr ou nd -i ma ge Y Y Y Y N Y Y Y Y Y bo rd er Y Y Y Y N Y Y Y Y Y bo rd er -c ol or Y Y Y Y N Y Y Y Y Y bo rd er -s ty le Y Y Y Y N Y Y Y Y Y bo rd er -w id th Y Y Y Y N Y Y Y Y N co lo r Y Y Y Y Y Y Y Y Y Y fo nt -f am il y Y Y Y Y Y Y Y Y Y Y fo nt -s iz e Y Y Y Y Y Y Y Y Y Y fo nt -w ei gh t Y Y Y Y Y Y Y Y Y Y he ig ht Y Y Y Y N Y Y Y Y S le tt er -s pa ci ng Y Y Y Y N S S Y Y Y li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g Y S Y Y N Y Y Y Y S te xt -a li gn N N N N N N N N N N te xt -d ec or at io n Y Y Y Y N Y Y Y Y N te xt -i nd en t S S S S N Y Y Y Y N wi dt h Y Y Y Y Y Y Y Y Y Y wo rd -s pa ci ng N N Y Y N Y Y Y Y N 558 | Appendix D: Styling of Form Elements Multiple Options background-color Figure D-81. Testing the background color of select element with multiple options Multiple Options | 559 background-image Figure D-82. Testing background images in select element with multiple options 560 | Appendix D: Styling of Form Elements border: 0; Figure D-83. Testing the removal of borders on select element with multiple options border: 0; | 561 border-color Figure D-84. Testing of border colors on select element with multiple options 562 | Appendix D: Styling of Form Elements border-style Figure D-85. Testing the styles of borders on select element with multiple options border-style | 563 border-width Figure D-86. Testing the widths of borders on select element with multiple options 564 | Appendix D: Styling of Form Elements color Figure D-87. Testing the color on select element with multiple options color | 565 font-family Figure D-88. Testing to set a different font on select element with multiple options 566 | Appendix D: Styling of Form Elements font-size Figure D-89. Testing a different size of font on select element with multiple options font-size | 567 font-weight Figure D-90. Testing a bold font on select element with multiple options 568 | Appendix D: Styling of Form Elements height Figure D-91. Testing to set a height for select element with multiple options height | 569 letter-spacing Figure D-92. Testing the letter spacing of select element with multiple options 570 | Appendix D: Styling of Form Elements line-height Figure D-93. Testing setting the spacing between lines of text on select element with multiple options line-height | 571 margin Figure D-94. Testing margins on select element with multiple options 572 | Appendix D: Styling of Form Elements padding Figure D-95. Testing padding on select element with multiple options padding | 573 text-align Figure D-96. Testing the alignment of text on select element with multiple options 574 | Appendix D: Styling of Form Elements text-decoration Figure D-97. Testing to set a different font on select element with multiple options text-decoration | 575 text-indent Figure D-98. Testing indenting the text on select element with multiple options 576 | Appendix D: Styling of Form Elements width Figure D-99. Testing the width of select element with multiple options width | 577 word-spacing Figure D-100. Testing the spacing between words on select element with multiple options 578 | Appendix D: Styling of Form Elements T ab le D -6 . A r ev ie w o f t he C SS p ro pe rt ie s on s el ec t e le m en t w it h m ul ti pl e op ti on s sh ow in g W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y N Y Y Y Y Y ba ck gr ou nd -i ma ge N N N N N Y Y Y Y N bo rd er N N N N N Y Y N N Y bo rd er -c ol or N N N N N Y Y N S Y bo rd er -s ty le N N N N N Y Y N N Y bo rd er -w id th N N N N N Y Y N N N co lo r Y Y Y Y N Y Y Y Y Y fo nt -f am il y Y Y Y Y Y Y Y Y Y Y fo nt -s iz e Y Y Y Y Y Y Y Y Y Y fo nt -w ei gh t Y Y Y Y Y Y Y Y Y Y he ig ht S S S S Y Y Y Y Y Y le tt er -s pa ci ng N N N N N S S S S S li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g N N N N N Y Y Y Y N te xt -a li gn N N N N N Y Y Y Y Y te xt -d ec or at io n Y Y Y N N N N N N te xt -i nd en t S S S S N N N N N N wi dt h Y Y Y Y Y Y Y Y Y Y wo rd -s pa ci ng N N N N N S S S S N word-spacing | 579 Select Element background-color Figure D-101. Testing the background color of select element 580 | Appendix D: Styling of Form Elements background-image Figure D-102. Testing background images in select element background-image | 581 border: 0; Figure D-103. Testing the removal of borders on select element 582 | Appendix D: Styling of Form Elements border-color Figure D-104. Testing of colors on the select element borders border-color | 583 border-style Figure D-105. Testing the styles of borders on select element 584 | Appendix D: Styling of Form Elements border-width Figure D-106. Testing the widths of borders on select element border-width | 585 color Figure D-107. Testing the color on select element 586 | Appendix D: Styling of Form Elements font-family Figure D-108. Testing to set a different font on select element font-family | 587 font-size Figure D-109. Testing a different size of font on select element 588 | Appendix D: Styling of Form Elements font-weight Figure D-110. Testing a bold font on select element font-weight | 589 height Figure D-111. Testing to set a height for select element 590 | Appendix D: Styling of Form Elements letter-spacing Figure D-112. Testing the letter spacing of select element line-height Figure D-113. Testing setting the spacing between lines of text on select element letter-spacing | 591 margin Figure D-114. Testing margins on select element 592 | Appendix D: Styling of Form Elements padding Figure D-115. Testing padding on select element padding | 593 text-align Figure D-116. Testing the alignment of text on select element 594 | Appendix D: Styling of Form Elements text-decoration Figure D-117. Testing to set a different font on select element text-decoration | 595 text-indent Figure D-118. Testing indenting the text on select element 596 | Appendix D: Styling of Form Elements width Figure D-119. Testing the width of select element width | 597 word-spacing Figure D-120. Testing the spacing between words on select element 598 | Appendix D: Styling of Form Elements T ab le D -7 . A r ev ie w o f t he C SS p ro pe rt ie s on s el ec t e le m en t w it h on e op ti on s ho w in g W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y N Y Y Y Y Y ba ck gr ou nd -i ma ge N N N N N N N N N N bo rd er N N N N N Y Y N N Y bo rd er -c ol or N N N N N Y Y N S Y bo rd er -s ty le N N N N N Y Y N N Y bo rd er -w id th N N N N N Y Y N N N co lo r Y Y Y Y N Y Y Y Y Y fo nt -f am il y Y Y Y Y N Y Y Y Y Y fo nt -s iz e Y Y Y Y N Y Y Y Y Y fo nt -w ei gh t Y Y Y Y N Y Y Y Y Y he ig ht N N N N N S S S S Y le tt er -s pa ci ng N N N N N Y Y Y Y Y li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g N N N N N Y Y Y Y N te xt -a li gn N N N N N Y Y Y Y N te xt -d ec or at io n Y Y Y Y N N N N N N te xt -i nd en t S S S S N Y Y Y Y N wi dt h Y Y Y Y Y Y Y Y Y Y wo rd -s pa ci ng N N N N N Y Y Y Y Y word-spacing | 599 Submit Button background-color Figure D-121. Testing the background color of select element 600 | Appendix D: Styling of Form Elements background-image Figure D-122. Testing background images in the submit button background-image | 601 border: 0; Figure D-132. Testing the removal of borders on the submit button 602 | Appendix D: Styling of Form Elements border-color Figure D-124. Testing of colors on the submit button borders border-color | 603 border-style Figure D-125. Testing the styles of borders on the submit button 604 | Appendix D: Styling of Form Elements border-width Figure D-126. Testing the widths of borders on the submit button border-width | 605 color Figure D-127. Testing the color on the submit button 606 | Appendix D: Styling of Form Elements font-family Figure D-128. Testing to set a different font on the submit button font-family | 607 font-size Figure D-129. Testing a different size of font on the submit button 608 | Appendix D: Styling of Form Elements font-weight Figure D-130. Testing a bold font on the submit button font-weight | 609 height Figure D-131. Testing to set a height for the submit button 610 | Appendix D: Styling of Form Elements letter-spacing Figure D-132. Testing the letter spacing of the submit button line-height Figure D-133. Testing setting the spacing between lines of text on the submit button letter-spacing | 611 margin Figure D-134. Testing margins on the submit button 612 | Appendix D: Styling of Form Elements padding Figure D-135. Testing padding on the submit button padding | 613 text-align Figure D-136. Testing the alignment of text on the submit button 614 | Appendix D: Styling of Form Elements text-decoration Figure D-137. Testing to set a different font on the submit button text-decoration | 615 text-indent Figure D-138. Testing indenting the text on the submit button 616 | Appendix D: Styling of Form Elements width Figure D-139. Testing the width of the submit button width | 617 word-spacing Figure D-140. Testing the spacing between words on the submit button 618 | Appendix D: Styling of Form Elements T ab le D -8 . A r ev ie w o f t he C SS p ro pe rt ie s on th e su bm it b ut to n W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y N Y Y Y Y Y ba ck gr ou nd -i ma ge Y Y N N N Y Y Y Y Y bo rd er Y Y Y Y N Y Y Y Y Y bo rd er -c ol or Y Y Y Y N Y Y Y Y Y bo rd er -s ty le Y Y Y Y N Y Y Y Y Y bo rd er -w id th Y Y Y Y N Y Y Y Y N co lo r Y Y Y Y N Y Y Y Y Y fo nt -f am il y Y Y Y Y N Y Y Y Y Y fo nt -s iz e Y Y Y Y N Y Y Y Y Y fo nt -w ei gh t Y Y Y Y N Y Y Y Y Y he ig ht Y Y Y Y N Y Y Y Y Y le tt er -s pa ci ng Y Y Y Y N Y Y Y Y Y li ne -h ei gh t N N N N N N N N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g Y Y Y Y N Y Y Y Y Y te xt -a li gn N N Y Y N N N N N Y te xt -d ec or at io n Y Y Y Y N N N N N N te xt -i nd en t S S S S N Y Y Y Y N wi dt h Y Y Y Y Y Y Y Y Y Y wo rd -s pa ci ng N N Y Y N Y Y Y Y N word-spacing | 619 Textarea Element background-color Figure D-141. Testing the background color of the textarea element 620 | Appendix D: Styling of Form Elements background-image Figure D-142. Testing background images in the textarea element background-image | 621 border: 0; Figure D-143. Testing the removal of borders on the textarea element 622 | Appendix D: Styling of Form Elements border-color Figure D-144. Testing of colors on the textarea element borders border-color | 623 border-style Figure D-145. Testing the styles of borders on the textarea elementborde 624 | Appendix D: Styling of Form Elements border-width Figure D-146. Testing the widths of borders on the textarea element border-width | 625 color Figure D-147. Testing the color on the textarea element 626 | Appendix D: Styling of Form Elements font-family Figure D-148. Testing to set a different font on the textarea element font-family | 627 font-size Figure D-149. Testing a different size of font on the textarea element 628 | Appendix D: Styling of Form Elements font-weight Figure D-150. Testing a bold font on the textarea element font-weight | 629 height Figure D-151. Testing to set a height for the textarea element 630 | Appendix D: Styling of Form Elements letter-spacing Figure D-152. Testing the letter spacing of the textarea element letter-spacing | 631 line-height Figure D-153. Testing setting the spacing between lines of text on the textarea element 632 | Appendix D: Styling of Form Elements margin Figure D-154. Testing margins on the textarea element margin | 633 padding Figure D-155. Testing padding on the textarea element 634 | Appendix D: Styling of Form Elements text-alignt Figure D-156. Testing the alignment of text on the textarea element text-alignt | 635 text-decoration Figure D-157. Testing to set a different font on the textarea element 636 | Appendix D: Styling of Form Elements text-indent Figure D-158. Testing indenting the text on the textarea element text-indent | 637 width Figure D-159. Testing the width of the textarea element 638 | Appendix D: Styling of Form Elements word-spacing Figure D-160. Testing the spacing between words on the textarea element word-spacing | 639 T ab le D -9 . A r ev ie w o f t he C SS p ro pe rt ie s on te xt ar ea W in IE 5 W in IE 5. 5 W in IE 6 W in IE 7 Sa fa ri2 W in FF 1. 5 M ac FF 1. 5 W in NN 7. 2 M ac NN 7. 2 Op 8. 5 ba ck gr ou nd -c ol or Y Y Y Y Y Y Y Y Y Y ba ck gr ou nd -i ma ge Y Y Y Y N Y Y Y Y Y bo rd er Y Y Y Y N Y Y Y Y Y bo rd er -c ol or Y Y Y Y N Y Y Y Y Y bo rd er -s ty le Y Y Y Y N Y Y Y Y Y bo rd er -w id th Y Y Y Y N Y Y Y Y N co lo r Y Y Y Y Y Y Y Y Y Y fo nt -f am il y Y Y Y Y Y Y Y Y Y Y fo nt -s iz e Y Y Y Y Y Y Y Y Y Y fo nt -w ei gh t Y Y Y N Y Y Y Y Y Y he ig ht Y Y Y Y Y Y Y Y Y Y le tt er -s pa ci ng Y Y Y Y N S S Y Y Y li ne -h ei gh t Y Y Y Y N Y Y N N N ma rg in Y Y Y Y Y Y Y Y Y Y pa dd in g Y Y Y S N S S S S S te xt -a li gn Y Y Y Y Y Y Y Y Y Y te xt -d ec or at io n Y Y Y Y N Y Y Y Y N te xt -i nd en t S S S S N Y Y Y Y N wi dt h Y Y Y Y Y Y Y Y Y Y wo rd -s pa ci ng N N Y Y N Y Y Y Y N 640 | Appendix D: Styling of Form Elements