Chrome default focus outline

Question

I'm trying to remove default focus froom chrome and it works with outline:none; in the same time I want to add an box-shadow but it not working for select .

*:focus { outline:none; }

input[type="text"]:focus,input[type="checkbox"]:focus,input[type="password"]:focus,
select:focus, textarea:focus,option:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 9px 0 #86AECC;
z-index:1;
}

fiddle: http://jsfiddle.net/DCjYA/309/

score 13 · Accepted Answer · edited Sep 25 '12 at 12:08

13

Try this:

* { 
    outline-color: lime;
}

edited Sep 25 '12 at 12:08

Adi

5,089
6
33
47

answered Feb 07 '12 at 19:03

mcmwhfy

1,654
5
36
58

The only answer that doesn't break navigation experience for keyboard or assistive technology users… http://www.outlinenone.com/ – Volker E. Mar 12 '19 at 20:23

score 2 · Answer 2 · answered Aug 11 '17 at 13:21

2

for me this worked

 :focus {
       outline: -webkit-focus-ring-color auto 0;
 }

answered Aug 11 '17 at 13:21

csomakk

5,369
1
29
34

score 1 · Answer 3 · answered Feb 03 '17 at 18:11

1

This should also do the trick:

a:focus, a:active {
    outline-color: transparent !important;
}

answered Feb 03 '17 at 18:11

Ikbel

7,721
3
34
45

Uranbold · Answer 4 · 2018-07-23T03:01:25.410

0

Most effective solution on Links only:

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

Or you can disable global:

*{
    outline:none;
}

edited Jul 23 '18 at 03:01

answered Jan 08 '13 at 08:42

Uranbold

45
6

Chrome default focus outline

4 Answers4

Linked