Styling Forms
Back to Tutorial Categories
Prettier Accessible FormsI wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. |
Customized input elementsEver wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility. |
Styling form controlsA question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. |
Form field hints with CSS and JavaScriptIt's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this. |
Styling even more form controlsThis is a follow-up to my previous post about Styling form controls. This reference shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms. |
Checkbox & Radio Input ReplacementThis technique will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional. |
Rounded Form ButtonsNow you can style both the a tag and button tag in this super easy and light-weight solution. Tested and compatible with IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9. |
Form field hints with CSS and JavaScriptIt's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this. |
Style Your Website's Search Field with JS/CSSContinuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. |
Beautiful CSS FormsThis tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only "label" and "input" tags to simulate an HTML table structure. |
Clean and Pure CSS FORM DesignHow to design a pure CSS form without using html tables. |