Comments on: Remove Button Focus Outline Using CSS

By: usman

usman — Wed, 10 Feb 2010 08:47:36 +0000

Thanks a lot bro.
i tried many tricks but dos’t work.

Thanks a lot…

By: Rafa Colunga

Rafa Colunga — Fri, 08 Jan 2010 02:18:14 +0000

Hey, great tip!! i have been searching the way to get rid of these border in buttons for a while.

By the way, i tend to specify slightly different styles for :focus, :hover, and :active states of buttons, generally changing the border or background color to a different tone, applying box-shadows and text-shadow, which looks way better than that outline thing, and gives a better overall impression without sacrificing accesibility.

I think that as long as you give your keyboard users a clear clue of the focus on the button, you’ll be safe on accesibility, with outline or not.

If you think it’s too much to style every state, i’d recommend at least using two different states, “normal” and “anything else” and apply it to :hover :active :focus, before you remove the outline.

By: swetha

swetha — Wed, 18 Nov 2009 04:49:07 +0000

But, is there no solution in IE???

By: Satish

Satish — Tue, 15 Sep 2009 08:47:38 +0000

Thank you so much for the solution!

By: Frank

Frank — Mon, 14 Sep 2009 09:38:09 +0000

Thanks a lot. I was looking for this a long time.

So it works for Gecko browsers, but what would be the solution for IE? Is the outline:none property enough then?

By: Brian Jørgensen

Brian Jørgensen — Sat, 25 Jul 2009 10:33:50 +0000

Hi, thanks for the solution, but unfortunately this does not work in IE ?

By: Karl

Karl — Fri, 24 Jul 2009 14:08:48 +0000

Hi fryck

There are a couple of reasons I can think of.

Firstly, blur() will take the focus away from the button. This means users who do not use a mouse will never be able to activate your button. The CSS technique does not take the focus away from the button, it just allows you to style the focus indicator.

Secondly that technique uses javascript, while this is pure CSS.

By: fryck

fryck — Fri, 24 Jul 2009 13:11:39 +0000

Why not simply use onFocus=”blur()” on the submit button ?

By: Saval

Saval — Fri, 10 Jul 2009 11:19:03 +0000

Gr8t suggestion, i had /input value=” Add” class=”btnbg” type=”button”/, so the dotted border will apply on the whole button instead of only text area

By: Saval

Saval — Fri, 10 Jul 2009 11:16:26 +0000

Gr8t suggestion, i had , so the dotted border will apply on the whole button instead of only text area