Highlighting Form Fields

Do you find that the content of form fields is hard to read? Well it is just as easy to use stylesheets to change the appearance of your form fields as it is to use them to change the appearance of other objects on your page.

All that you need to do is to add stylesheet commands to your stylesheet file that refer to the various form field types whose appearance you want to alter or alternatively add them to the web page itself (either in the head of the page or in the form fields themselves).

For example the following textarea field has style="font-family:verdana,arial,sans-serif;font-size:11pt;font-weight:bold;"

Note that these commands have no effect on earlier browsers such as Netscape 4 which will still display the form content using the default appearance. Also while you can use any of the stylesheet commands on your form fields not all of them will be recognised by all browsers that support stylesheets.

Of course form fields are interactive and so by placing additional stylesheet commands in the onfocus and onblur methods you can give the form field having the focus a different appearance from the other fields on the form to help your visitors see which field they are at. This is what I do with the Ask Felgall form to apply the blue background to the current field. You can of course add stylesheet commands to the other javascript methods that can be attached to your form fields to achieve other effects as well.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow