Here is a really simple technique that will help Firefox (along with its spinoffs, flock...), Safari and Opera users better enjoy online forms. I am sure most of you have used safari at least once. When using it you would have noticed that anytime you go to input information into a form field the field displays a light blue glow around the field. This greatly helps a user find which field is selected as well as it is just overall more visually pleasing.

This type of effect can be duplicated using the CSS selector :focus. Problem is it currently only works in Firefox, Opera, and Safari so poor IE users are out of luck. This includes IE7 users. So that's a good 70% of the online users who will not see these effects. This percentage is dropping somewhat quickly though as people adopt more modern browsers. Also, there are ways to simulate the focus selector using javascript so that it works in IE but to me it's too much work for what it's worth, and since the :focus selector has no negative effects in IE there is no reason not to use it. Enough bickering, now on to how it is accomplished.
We are going to add some basic styles to our form first.
input, textarea
{
width
:200px;
color:
#333;
background:
#eee;
border
:1px solid #666;
padding
:3px;
}
Check it out so far in action.
You will notice there is no change when the user clicks on a field. It's somewhat hard to see which form field is selected until you start typing in text. So now we want to change how the field looks when the user clicks on an input field. To do this we will need the following.
input
:focus, textarea
:focus{
border
:1px solid #333;
background:
#FFF;
}
Check it out so far in action.
As you can see the :focus selector works basically like a :hover for a link, but it is applied to form elements.
In this example these slight color changes can make it easier for the user to see what part of the form they are on. As well as the form being more visually appealing to the user. Combining this tip along with my previous tips about background images within form fields, you could create quite a visually attractive, and user friendly form.
Remember forms don't have to look like crap. With a little time and some css, they can be one of the best parts of your design.. Now if only I listened to my own advice more often.