CSS Cookbook, 3rd Edition

Appendix E. Styling of Form Elements

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 second part examines eight form elements and how they can be modified using 20 CSS properties (listed in Table E-1) in 10 different browsers:

• Checkboxes, as shown in Table E-2 and Figure E-1 to Figure E-20
• File upload, as shown in Table E-3 and Figure E-21 to Figure E-40
• Radio buttons, as shown in Table E-4 and Figure E-41 to Figure E-60
• Input text, as shown in ...