When you’re building web interfaces or just websites you always need to do cross-platform browser testing. As we saw, inputs inherits different styles from browsers and you need to style them. In this article i will show you how simple is to remove Safari’s glowing blue outline.
The normal state of our input looks like this:
Please notice the effect that appears on input focus(we’re talking about Mac OS X browser-Safari):
To remove this annoying input effect we just need to add one css line and it will disappear:
input:focus
{
outline: none;
}
There you go! Simple but very efficient.
i am doing a website for a client and have a spry collapsible panel which has the same blue focus line around the ‘focussed panel’ in Safari. As this is not an input field what css would i use to remove it? Any help appreciated
Generally “outline:none;” to a focused element removes the blue stroke, not only for an input but the input case is the most encountered.
Pingback: 10 Random CSS Tricks You Might Want to Know About - FEDS /beta/
amazing mind blowing ……………………..
too long time m find this type of glow aw-round outside
What about when you trigger the focus outline. I tried removing but seems not to work. Any idea how?