Make Input Box Have Safari's Blue Outline

Question

Hi Everyone:

I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.

Thanks for any help!

Answer 1

Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.

However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:

box-shadow: 0 0 4px #aaf;

One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...

Answer 2

If there is a doubling up, you can remove Safari's blue outline with outline:none.