Styling <input> Elements
CSS styling can be used effectively to alter the appearance of most input element types. As usual, there are browser-dependant limitations on what can and cannot be done. We summarize the behavior of the more frequently used CSS attributes below
- background-color: Can be used with all element types. However, only Opera uses this attribute for radio buttons and checkboxes. Also, using this attribute with button inputs causes them to loose their rounded corners in Firefox and IE - Opera does not implement rounded corners to begin with.
- border: Borders can be used to good effect with all element types except buttons, radio buttons and checkboxes. Buttons appear unresponsive if they are given a border. Only IE handles border assignments to radio buttons and checkboxes correctly.
- color: Set the color attribute to alter the color of text appearing in the control. Only Opera uses this attribute setting to change the appearance of radio buttons and checkboxes.
- display:Input elements are rendered inline - i.e. using the exact amount of horizontal space required to display the element. Changing this attribute is one way of exercising control over the layout of form controls.
- font: The font-family, font-size, font-style and font-weight attributes can be used effectively with all input types.
- letter-spacing: Set the letter-spacing attribute where required to alter the spacing between individual letters. This can be done with all input types.
- The margin and padding attributes can be used with all input element types.
- text-decoration:IE7 obeys text-decoration attribute settings with all input types. However, Firefox and Opera ignore this setting when displaying button captions. Opera never uses the
text-decoration:line-throughandtext-decoration:overlinesettings.
As we have indicated earlier input elements with the type="file" setting do not respond to CSS styling. This is a constraint imposed by browsers in the interests of security. We discuss a technique for circumventing this constraint here.
