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 One low monthly fee you get access to files using 4 premium accounts

Unlimited Storage and Bandwidth for $4.95/mo Your Link here @20$ Member of the Month - Free Rapidshare Account Join NFO Competition
Go Back   Home > Tutorial Section > Programming > CSS and XML
Forgot Password? Join Us!

Notices

Your Ad Here


Post New Thread Reply
 
LinkBack Thread Tools Display Modes
Old 06-14-2008, 06:43 AM   #1 (permalink)
 
KoOL's Avatar

 
User Info
Join Date: Oct 2007
Location: In Your Mind
Age: 27
Achievements Posts: 11,081
Casino Cash: $1187430

Total Points: 239,825,819,510.72
Donate

KoOL has disabled reputation

Awards Showcase
Administrator Of the Month Of Jan 
Total Awards: 1
Improving the usability of forms with CSS :focus

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.
KoOL is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply
The Following User Says Thank You to KoOL For This Useful Post:
barnick (06-28-2008)
Click here to Donate to remove the Adverts.
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 Off
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 07:58 PM
Focus DVD-CD Cover Maker ver.2.1 PaNkAJ Other.. 0 05-01-2008 02: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 01:50 AM


These are the 125 most used thread tags
Tag Cloud
(2008) 1080i 2007 2008 2009 action adobe adventure aio antivirus appz audio avalon avira backgrounds beta black build burning collection comedy converter copy crack database deluxe desktop development digital tutors direct download disciple download download manager drama driver dvdrip easy edition files final finance flash fonts free full funny game games getdata graphics guide hacking hdtv hidden high hq increditools internet introducing myself kaspersky keygen link love magic manager matlab maya media megaupload microsoft mobile movie multimedia music n95 nero network office pack photoshop pictures pillar platinum plumb pocket portable premium professional quality rapidshare recover retail ringtones rock rs.com security serial sexy smartmovie software soundtrack steppenwolf studio suite symbian telugu movie template thriller tools tutorial ultimate utilities video videos virus vista wallpaper wallpapers web development windows wwe xp xvid [2008] [rs.com]

New To AiO Forum? Need Help?

Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.

Site Best Viewed with Firefox 3.0 & IE v7.0
RapidShare Links PhazeDDL Warez
PhazeDDL Warez