Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I get a lot of clients that comment that the focus box isn't obvious enough in some browsers. Is it common and good practice to make it more obvious? If so, how exactly do people do this?

share|improve this question
add comment

2 Answers

up vote 7 down vote accepted

Sadly making the focus box clearer is not common enough. It's not just about the browser, it's also about the monitor - the setting of brightness and contrast and the quality of the monitor. The border of the input box can be indistinguishable from white on cheaper/older flat panel monitors - often found in schools. Light blues in particular are a problem. They can make it next to impossible to locate the input boxes except by guessing.

Here is an example from the aer-lingus website, where the contrast between the background and the border is insufficient:

Too little contrast

The border color is #dcdfe5, and it is just not far enough away from white. This is what it looks like on a cheap (or badly set up) monitor, or a laptop used out-of-doors.

Washed out

The solution is to make a dark enough border, and rely on red/green/yellow/gray to differentiate it rather than the blue. Assuming a white, #ffffff, input field, #c0c0c0 is far enough into the dark zone to be safe as a border color - in normal indoor lighting.

On focus, a subtle yellow cast to the background can help show an input box has focus, but won't be seen on all monitors. Increasing border width to 2px and making significant change to the border color works better. This is the default in Chrome.

The aer-lingus site 'survives' because if you do guess where the field is and click you see the cursor and get the focus border:

with focus

A thicker border, and enough color change. At least, that is how it looks in Chrome. The aer-lingus entry box is almost a complete washout in Firefox - on a low contrast monitor. For focus to work well on other browsers it would need something like this:

<style type="text/css">
input:focus
{
background-color:#ffffe8;
border-style:solid;
border-width:2px;
border-color:#e0ba71;
outline:none;
}
</style>

You don't want too eye-popping a change to the background, but a significant change in the border works well.

share|improve this answer
    
Great answer much more complete than mine. I learned a lot, thanks! –  jonshariat Jun 10 '11 at 6:42
add comment

haha oh sounds like a fun client.

Its not common practice to change a common practice, meaning the focus element is a standardized effect and function.

You cannot change the focus element itself through HTML or CSS but you can apply CSS on focus.

input:focus {
background-color: red;}

You can read more about it HERE

So, again, its not common practice to change it because it itself is a common practice.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.