By default Safari will render a glow effect around input elements when the input receives focus.
In certain situation, this behaviour can be quite irritating, especially if you are customising the appearance of your inputs so that that differ greatly from the standard look.
In this example, we were opting for an Apple like rounded input element using background images and a transparent input.
All appears to be fine until the input receives focus when browsing using Safari and you are presented with the following outer glow effect around the original input element.
The solution to removing this effect is a very simple one. Set the outline property of the element to none in your CSS file.
input { outline: none; }
You may want to be more specific and target a single element, but here we are setting the value for all input elements.
Thats great but how about if you want to style this highlight? I recently had this problem and could find no way of changing the highlight colour from the default blue using standard CSS markup.
Ben, If you’re looking to change the colour only try using the ‘outline-color’ property and defining your colour this way.
Thanks for this! I was having this problem and it was driving me crazy, your website was the only one that was clear and to the point! THANK UUUU!
This also works in other browsers which do this… take chrome for example. (Just a note :D)
Thank you very much. I have seen many troubles with css & js.