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?

2 Answers 2


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">

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

  • Great answer much more complete than mine. I learned a lot, thanks!
    – jonshariat
    Commented Jun 10, 2011 at 6:42

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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