Inside Technique : Styling Input Controls
By Scott Isaacs

Did you know the appearance of input boxes and buttons can be customized without using Java or ActiveX? Just apply CSS and you can make cool input controls that degrade gracefully in with the traditional look in older browsers.

In this short article, we demonstrate how to customize the appearance of the input controls using CSS-1. Currently Internet Explorer 4.0 is the only browser that provides consistent support of CSS-1 on the input controls. Navigator 4.0 sometimes has problems handling the style attribute and only supports very few CSS properties on the input controls.

Adding Style Sheets to Controls

There is nothing special to adding style sheets to controls. You just apply the style just as you would any other element on the page. For example, below we created a text-box formatted with 24pt text:

<INPUT TYPE=text STYLE="font: 24pt arial geneva sans-serif">

Navigator 4.0 does honor a few style sheet properties. In this example, the font-size is applied but the font-family is ignored.

On the next page, we created a list of examples to give you ideas on how to customize your input controls and point out some areas where Navigator 4.0 has problems. The same technique can also be used to customize buttons and the TEXTAREA element.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.