Remove or disable focus border of browser via javascript

Question

Does anybody know how to disable or manipulate the (in most browsers) dashed border of a dom-element if it has the focus in a tabindex order?

I want to build my own style for a focused element, but it would be great to use the existing feature, because with tabindex it is possible to bind keydown event to the dom-element.

score 200 · Accepted Answer · answered Jun 10 '10 at 14:58

200

Just make a CSS rule for the elements you want that have outline:none;

answered Jun 10 '10 at 14:58

Gabriele Petrioli

191,379
34
261
317

2

That's quite good, if you click with the mouse on the item that border does not appear anymore but if you navigate through keyboard? How do you highlight the element? – coorasse Apr 05 '13 at 11:12
1

@coorasse, if you want to only hide it for clicks you will need to use javascript and call `.blur()` on the element once you click it.. – Gabriele Petrioli Apr 05 '13 at 11:38
epic short answer :) +1 – Al-Hanash Moataz Aug 12 '20 at 23:58
**Also consider this article: https://www.sitebase.be/disable-focus-outline-without-breaking-accessibility/ (if you need to design for accessible web !! thanks @Wim Mostmans)** – helle Jun 16 '21 at 11:41
@helle glad I could help ;) – Wim Mostmans Feb 09 '22 at 10:50

score 43 · Answer 2 · answered Sep 05 '10 at 18:29

43

CSS trick:

:focus { outline: none; }

answered Sep 05 '10 at 18:29

goker

2,690
22
20

4

Important to consider usability issues as soon as you are disabling a accessibility feature native in the browser. I suggest to create your own outline focus, like background color yellow. – blagus Mar 20 '18 at 01:53

score 5 · Answer 3 · edited May 31 '17 at 08:46

5

With Firefox 53.0, if I disable the outline with one of the proposed solution, Firefox displays the default one.

However, if I use a blank color, it doesn't detect that the outline is hidden:

input:focus{
   outline: 1px solid rgba(255,255,255,1);
}

edited May 31 '17 at 08:46

R3tep

12,512
10
48
75

answered May 10 '17 at 00:33

hsyl20

104
1
3

score 3 · Answer 4 · edited Mar 19 '11 at 13:14

3

input::-moz-focus-inner { border: 0; }

edited Mar 19 '11 at 13:14

moinudin

134,091
45
190
216

answered Jun 29 '10 at 09:35

Mayur bhalgama

265
3
10

score 2 · Answer 5 · answered Sep 06 '21 at 12:22

Classic way is set outline to none:

outline: none;

However, it didn't work anymore on higher version browser or FireFox. This trick work for me:

outline: 0px solid transparent;

LOL. In future, if it detected transparent, then just replace with a little tiny higher transparent:

outline: 0px solid rgba(0,0,0,0.001);

Some browsers, it was a boxshadow too:

outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

score 1 · Answer 6 · answered Dec 29 '13 at 05:44

1

a {
outline: 0;
}

a: hover,
a: active,
a: focus {
     outline: none;
}

input::-moz-focus-inner {
border: 0;
}

answered Dec 29 '13 at 05:44

rotamota

77
1
1

score 0 · Answer 7 · answered Jun 28 '16 at 06:45

0

:focus state - Set the outline property to 0px solid transparent;

answered Jun 28 '16 at 06:45

Mahendra Kulkarni

1,437
2
26
35

score -4 · Answer 8 · answered Sep 24 '18 at 07:03

-4

$(function() {
     $('a').click(function() { $(this).blur(); });
     $('input').click(function() { $(this).blur(); });
});

Don't use CSS disable focus: http://outlinenone.com/ This use other users.

answered Sep 24 '18 at 07:03

slva2000

99
4

1

why should I not use css? I see the point in your link, but your suggested solution will totally freak out the GUI and you wont be able, to access the fields. – helle Sep 24 '18 at 20:17

score -8 · Answer 9 · answered Jun 10 '10 at 14:52

-8

Using jQuery you can do

$("#nav li a").focus(function(){
  $(this).blur();
});

answered Jun 10 '10 at 14:52

Boris Delormas

2,509
1
19
27

with blur i lose the focus, isn't it? so i cannot bind keydown event as well as mousewheel ... – helle Jun 10 '10 at 14:54
Right, didn't get the whole question ;) – Boris Delormas Jun 10 '10 at 15:25

Remove or disable focus border of browser via javascript

9 Answers9

Linked

Related