I have tried EVERYTHING to get rid of this focus blue highlight and absolutely nothing seems to work.

I have tried:

input:focus {
   outline: none; 
}

which I've read on here is the correct solution. It's not working though. Using the latest Chrome / Safari / Firefox the blue highlight is still there when clicking into focus.

It works in IE7 / IE8 funnily enough. I tried a javascript solution I read on stack as well where I add an onclick:blur method to the input, but this just made the input field uneditable?

Any solutions guys? Would prefer a clean CSS solution if possible.

I have tried EVERYTHING to get rid of this focus blue highlight and absolutely nothing seems to work.

I have tried:

input:focus {
   outline: none; 
}

which I've read on here is the correct solution. It's not working though. Using the latest Chrome / Safari / Firefox the blue highlight is still there when clicking into focus.

It works in IE7 / IE8 funnily enough. I tried a javascript solution I read on stack as well where I add an onclick:blur method to the input, but this just made the input field uneditable?

Any solutions guys? Would prefer a clean CSS solution if possible.

• javascript
• html
• css
• input
• focus

• Something else must be going on. IE7 and IE8 don't even have any focus glow to begin with - which is why it appears to work. – BoltClock Commented Sep 19, 2011 at 16:29
• Check that you're not applying a border as well, that might be the case. – Andres I Perez Commented Sep 19, 2011 at 16:42
• @andres-ilich I have border: 0px so no. :( – skålfyfan Commented Sep 19, 2011 at 16:50
• Here's a simple JSFiddle removing the outline on a textfield. Does it still show up blue when you focus it? If not, you probably have a CSS specificity issue as indicated in one of the answers below. Use Firebug or Chrome's Developer Tools to see where the element gets its styles. You'll need to post some of your code for anyone to help you solve this because you've already identified the (seemingly) correct solution. – skyline3000 Commented Sep 20, 2011 at 3:59
• @skyline3000 Thanks Sky. You made me really sit back and look at it. Turns out it was a style being applied by a theme in a Drupal deployment. I wasn't seeing it in Chrome Dev Tools but Firebug showed it. Works now. – skålfyfan Commented Sep 21, 2011 at 18:33

2 Answers 2

That bit of css would only work if there's nothing more specific. Remember, css goes by the most specific rule taking precedence, so saying

input#myid:focus {  /* <--more specific, takes priority */
    outline: blue;
}

input:focus {  /* <--less specific, overridden by above */
    outline: none;
}

You can force the override with !important, though that can lead to other problems later on:

input:focus {
    outline: none !important;
}

Use Firebug to view the puted CSS for the element when it's hovered. It'll tell you where the rule(s) applied to element are ing from.

I was having the same problem and this worked for me

#search input[type="text"]:focus {
width: 180px;
outline: none;
}