I was struggling with this problem all day yesterday and I think I’ve finally found a simple solution that works in all browsers.
I needed to remove the blue glow highlight in Safari that indicates when a textfield has focus. Normally, for usability reasons, I would be against removing functionality like this, but as it was corrupting my design drastically it had to go. It’s also the only text field on this page and it’s huge.
Here’s a screenshot showing the problem the blue glow causes in highly styled forms:
Now let’s take a look at the fix.
The basic idea is to hide the extra pixels that are added when Safari makes its highlight.
We can do this by making a surrounding DIV the size of the input box. We call this the “div.hider”. Then to make sure it masks all contained content, we set it to
overflow:hidden
We should then add 4 pixels to both the width and height of the actual input box. Finally, set negative margins of -2px to the top and -2px to the left to offset the field back to the required position. This is effectively producing a simple layer mask.
div.hider {
width:250px; /* Actual width */
height:20px; /* Actual height */
overflow:hidden;
}
input.removeGlow {
width:254px; /* Actual width + 4 */
height:24px; /* Actual height + 4 */
margin:-2px 0 0 -2px;
}
And that’s it. You can it in action here. You obviously need to view it in Safari to see the effect ;)
