Styling HTML Form Elements

Guidelines

Layout

• HTML form elements are inline by default (similar to inline-block)

Text box

• Re-skin

Textarea

• Re-skin

Checkbox

• Hide and fake

Radio button

• Hide and fake

Select box

• Hide and fake the main box and dropdown   (capture mouse events for the page; limited accessibility support)
• Hide and fake the main box                           (using opacity; doesn't work in IE6)
• Fake the main box and use a list box for the dropdown                     (capture mouse events for the page)
• Fake the main box and use a re-skinned list box for the dropdown    (capture mouse events for the page)

List box

• Avoid   (use select box or radio buttons for single-selection, and checkboxes for multiple-selection)
• Re-skin   (IE6/7: pair of div wrappers, pairs of negative margins, overflow:hidden on the outer element)

Button

• Re-skin
• Hide and fake

File selection

• Hide and fake

Partial summary of safe styles to override

text box, textarea

• width, height
• color, background-color
• font-size, font-weight, line-height
• border
• margin, padding   (for textarea, padding applies to the textarea as a whole, not the space in-between lines) 

button

• same as above, minus line-height

select box, list box

• width
• color, background-color   (both are only applied to non-selected rows)
• font-size, font-weight
• margin   (for select boxes, the margin is applied around the combined select box and dropdown list, not between them) 

check box

• margin 

radio button

• nothing

Text box

• Can be re-skinned using CSS
• Hide and fake is not an option because of text selection, the caret, etc. 

• Safe: width, margin, horizontal padding
• Safe, if used carefully: line-height
• Problematic: height, vertical padding, text-indent

Doesn't work when disabled

• color (IE6/7, Safari 3, Chrome 1, Opera 9)

Guidelines

• Use font-size to scale the edit box vertically
• Use width to scale the edit box horizontally
• When width is specified, it's not necessary to set the size attribute

Browser behavior

• Height and vertical padding interfere with the default browser consistency - the proportional vertical spacing of the textbox in all browsers
• text-indent has no effect on the textbox in IE6/7 and Opera

• line-height has no effect in Firefox, but it's safe to use in other browsers, as long as the value specified is not greater than the rendered height of the textbox (in which case the height of the textbox will increase in Safari/Chrome)
• Set margin:0 and width, for consistency in Safari

Textarea

• Can be re-skinned using CSS
• Hide and fake is not an option because of text selection, the caret, etc.

Works

• width, height
• color, background-color
• font-size, font-weight, line-height
• border, margin
• padding (applies to the textarea as a whole, not in-between lines) 

Doesn't work when disabled

• color (IE6/7, Opera 9)

Scrollbars

• To prevent the vertical scrollbar from appearing until additional lines of text have been added, use overflow-y:auto (still appears for Opera 9)

Long text with no whitespace (or other typical characters to break on for wrapping text)

• By default, long text wraps in IE6 but not FF (causing a horizontal scrollbar to appear (or be enabled))

white-space CSS style

white-space: [normal, pre, nowrap];

• Has no effect on long text in FF
• white-space:nowrap prevents any text from wrapping in IE6 (even text with whitespace)

wrap HTML attribute

wrap="[soft, hard, off]"

• Has no effect on long text in FF
• wrap="off" prevents any text from wrapping in IE6 (even text with whitespace) 

Checkbox

• Cannot be re-skinned using CSS

Works somewhat

• width, height (FF: adds a margin around the checkbox) (IE6/7: magnifies the checkbox as a whole)
• margin (outside of the checkbox area)

Doesn't work

• border, padding
• color
• background-color (FF: no effect) (IE6/7: changes the bg color of the implicit padding around the checkbox)
• background-image (FF: no effect) (IE6/7: changes the bg image of the implicit padding around the checkbox)
• font-size, line-height
• opacity (hides the checkbox and the implicit padding, and makes it unusable)
• outline (IE6/7: not supported)

Radio button

• Cannot be re-skinned using CSS

Works somewhat

• background-color (IE6/7: surrounding the radio button) (FF: have to use the parent element)

Select box

• Cannot be re-skinned using CSS

Faking a re-skinned select box

• Fake the main box and make the real one see-through using the opacity property

•  Fake the main box and use a list box for the dropdown list

Works (FF, IE6, IE7, Safari 3 (Windows), Opera 9)

• width
• font-size, font-weight

Works somewhat

• margin (applied around the combined select box and dropdown list, not between them)
• color (only applied to non-selected text)
• background-color (only applied to non-selected text)

Doesn't work

• height (IE6, IE7)
• line-height (FF, IE6, IE7, Opera 9)
• border (IE6, IE7)
• padding (IE6, IE7, Safari 3 (Windows))
• opacity (IE6)
• clip (FF, IE6, IE7, Safari 3 (Windows), Opera 9)

Doesn't work when disabled

• color (IE6/7, Opera 9)

Opacity

• Setting the select box to an opacity of 0 (transparent) hides the main box (though it's still clickable) without hiding the dropdown list
• If the fake box is given a z-index lower than that of the transparent main box, the select box can be opened by clicking on the shared space of the fake box and the main box (the main box sits on top, so it will receive the mouse events first)

Browser behavior

• It's not possible to change the outer formatting of select boxes in IE6, and the only option available for IE7 is opacity
• In IE6, opacity has no effect 

• Bottom padding applied to the main box is between the main box and the dropdown list (FF)
• In Opera 9, adding padding stretches the right-hand button
• In IE6/7 and Opera 9, when an item is selected, the main box appears with a dark blue bg and white text (regardless of the color and bg color specified)
• In Safari 3 (Windows), when the border is set to 0, the fancy styling of the main box goes away

List box

• Can be re-skinned using CSS

• Hide and fake is not a practical option (especially for multiple-selection list boxes) because of row selection
• The styling options are the same as for the main box of a select box

Single-selection

• Favor using a select box or radio buttons instead

Multiple-selection

• Favor using check boxes instead
• Bad for usability (unintuitive and awkward)
• Fine in cases where it can be repeatedly used like a single-selection list box (i.e. a pair of list boxes where you move items from one to the other)

Button

• Can be re-skinned using CSS

Works

• width, height
• color, background-color
• font-size, font-weight
• margin, padding, border 

Doesn't work

• line-height (FF, Opera 9)

Doesn't work when disabled

• color (IE6/7, Opera)

File selection

• Cannot be re-skinned using CSS

Works

• font-size
• color (text box)
• margin 

• Horizontal size (combine width and size attribute)
• Vertical size   (combine height, font-size, line-height, and vertical padding)

Doesn't work

• background-color (FF, ...)
• line-height (FF, Safari, ...)
• font-weight (FF, ...)
• width (FF, ...)
• height (Safari, ...)
• border (FF, Safari, ...)
• size (Safari, ...) 

FF

• font-size affects the text box and button
• color only affects the text box
• padding has no effect
• height only affects the button
• Horizontal size: size
• Vertical size: font-size

IE6/7

• font-size affects the text box and button
• color only affects the text box
• background-color only affects the text box
• Horizontal padding is applied inside the text box
• Vertical padding has no effect
• height affects the text box and button
• width and size attribute both work, with width winning out when both are used
• border affects the text box and button
• Horizontal size: width or size (width takes precedent)
• Vertical size: height, font-size, line-height

Safari

• font-size only affects the text box
• color only affects the text box
• background-color affects the entire element
• padding is applied around the entire element
• height does not change the size of the text box or button (it creates extra space below them)
• size attribute has no affect
• Vertical padding is applied inside the text box (in effect)
• border is applied around the entire element
• Horizontal size: width
• Vertical size: font-size, vertical padding