Improving Form Usability with CSS
-
1Login
Tutorial Details
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.
Forms don't have to look plain and boring. With a little time and some css, they can be one of the best parts of your design.
