The CSS way to style forms | Part Two

• Styling textareas
• Styling select boxes
• Styling submit buttons
• Styling radio buttons and check boxes

This tutorial continues onward from The CSS was to style forms | Part One. I felt there was too much info in the document, so I decided to split the tutorial up into two parts.

Styling textareas

The type selector

To style the textarea use the textarea type selector, which will target all textareas on your website.

			
			textarea {
			...
			}						
		

The descendant selector

Targeting a textarea based on its parent container involves the use of the descendant selector:

			
			#myForm textarea {
			...
			}						
		

This styles all textareas inside the form myForm.

The class selector

Using the class selector, we can target all textareas with a given class:

			
			textarea.myclass {
			...
			}						
		

This styles all textareas with the class myclass applied to them.

Default Font

If your textareas do not have any font setting applied to them, you may notice that their font-family is different from the font-family specified in your body. Textareas use Courier as their default font-family. To change this, simply specify the font you wish to use instead:

		textarea {
			font:100% Arial, Helvetica, sand-serif;
		}		
		

Width and height

Although rows and cols are required, if you are coding in XHTML, you may find it easier to size your textareas using CSS.

		textarea {
			width:100px;
			height:300px;        
		}		
		

Working Example

Here's an example of a textarea with a few styles applied to it.

Java Hotspot(TM) 64 Bit Server VM warning: Exception java.lang.OutOfMemoryError

CSS Code:

		textarea {
            width:300px;
            height:110px; 
            background-color:#e6dc72;
            font:1.5em Verdana, Geneva, sans-serif;      
		}		
		

Styling select boxes

Styling select boxes is slightly trickier than what we have done so far. Sometimes styles applied to the select tag will also be applied to its children, and in other cases, they won't. This normally depends on whether the options - the select's children - have any conflicting styles applied to them. For instance, a background applied to a select will also appear on its options, unless they already have a background applied to them; a border is only applied to the option that is selected at the time (as seen below). Trial and error is often required with styling select boxes, but here are some points that might help:

• Background will be applied to the whole of the select box - this includes its children - unless they already have a background applied to them
• Border will only be applied to the item that is selected at the time, but not in IE6 or IE7. No border will be rendered in IE6 or IE7.
• Height will only work in Firefox, Chrome and Opera, and then it will only be applied to the selected element
• Width works across the board and is applied to the select and its children
• Border, margin and padding have no effect in Internet Explorer.

Example

Working Example:

Uncharted Resident Evil Tomb Raider Call Of Duty

CSS Code:

		select {
            width:120px;       
            padding:6px;
            border:3px solid red;
            background-color:orange;
		}
		

Result:

As you can see, select boxes render quite differently depending on what browser you are using and the CSS applied to them.

Styling the options

The options are the select's children. When we want to style the elements inside a select box, we target the options. Firefox is the only browser that allows you to add a border, padding and margins to options.

Example

Working Example:

Uncharted Resident Evil Tomb Raider Call Of Duty

CSS Code:

		option {
            padding:4px;
            border:2px solid purple;
            background-color:#a5eca8;
		}
		

Result:

As you can see, only Firefox applied the border and padding.

Styling submit buttons

As submit buttons fall under the input category, if we want them to look different from the other inputs then we need to use the very cool attribute selector, and also create a class for older browsers; the class I am using here is called defaultButton. The attribute selector allows us to target elements with specific attributes and attribute values.

Example

Working Example:

CSS Code:

			input[type=submit], .defaultButton {
				background-color:#3399FF;
				color:#FFFFFF;
				border:4px solid black;
			}
		

Result:

Styling radio buttons and check boxes

If you have any styles directly applied to the input element, your radio buttons and check boxes will inherit these, being input elements themselves. If you don't want your radio buttons or check boxes to look like everything else under the input tag, then create a separate class for them.

            .radio, .check {
            	background-color:olive;
            	padding:4px;
            }
		

Removing the unwanted space

Radio buttons and check boxes will sometimes render with extra space around them. I personally don't have a problem with this. But if you do, you can ger round the issue by removing the margins and padding:

			.radio, .check {
				margin:0;
				padding:0;
			}
		

Example of styled radio buttons

Working Example:

If you're not using IE, you might miss it! Here it is, right above this caption!

CSS Code:

			.radio {
				background-color:blue;
				border:2px solid red;
			}
		

Result:

Example of styled checkboxes

Working Example:

This one's easier to spot!

CSS Code:

			.check {
				background-color:green;
				border:2px solid orange;
			}
		

Result: