All in one forum  - Applications | Games | E-Books | Music, Movies & Videos | Mobile Stuff | Live Discussions | Webmaster Stuff | Many More | Community to Hang Out & Stick to
Mark Forums Read

Go Back   Home > Tutorial Section > Programming > CSS and XML
Reload this Page [Tutorial] Improving the usability of forms with CSS :focus
Forgot Password? Join Us!
CSS and XML Post your Cascading Style Sheets and eXtensible Markup Language related tutorial here

Notices
Free Image Hosting Solution for all Your link here @ 10$ 10 K Unique Visitors 1 Million Visitors Per Month Your link here @ 10$

Your Ad Here

Rate This Thread - Improving the usability of forms with CSS :focus.

Post New Thread Reply
 
LinkBack Thread Tools Display Modes
  (#1 (permalink)) Old
 
KoOL's Avatar
 
User Info
Join Date: Oct 2007
Location: In You Mind
Age: 27
Achievements Posts: 10,862
Casino Cash: $1145330

Total Points: 237,899,712,033.76
Donate

KoOL has disabled reputation

Awards Showcase
Administrator Of the Month Of Jan 
Total Awards: 1
Improving the usability of forms with CSS :focus - 06-14-2008, 05:43 AM

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.



For Download Links U need to Press Thanks Button

Please don't PM me For Posts, Request and Not Working Threads. Use Button.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following User Says Thank You to KoOL For This Useful Post:
barnick (06-28-2008)
Click here to Donate to remove the Adverts.
Your Ad Here
Post New Thread Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Improving system performance of your Vista hackproof Windows Vista 2 09-10-2008 06:58 PM
Focus DVD-CD Cover Maker ver.2.1 PaNkAJ Other.. 0 05-01-2008 01:36 AM
Fast Forms 2.991 KoOL Appz Zone 0 03-15-2008 06:28 PM
Focus DVD Copy 1.9 ijhtio Appz Zone 0 01-10-2008 08:36 PM
Balanced Website Design: Optimising Aesthetics, Usability and Purpose sharad_mlk Ebooks,tutorials & Other Stuff 0 05-01-2007 12:50 AM


New To AiO Forum? Need Help?

All times are GMT. The time now is 10:48 PM.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
vBulletin Skin developed by: vBStyles

RapidShare Links PhazeDDL Warez
PhazeDDL Warez