| 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.  | 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. |
|
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;
|
|
