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

Get CSS Cookbook, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.