cant remove blue highlight chrome on focus

Question

when you click on search there's blue outline, for some reason css ignores these settings i've applied:

input:focus {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  outline-style: none !important;
  box-shadow: none !important;
  outline-color: transparent !important;
  outline-style: none !important;
  border:none !important;
  border-color: transparent !important;
}

score 2 · Accepted Answer · answered Jun 25 '20 at 13:38

2

Add this CSS

.help-center .hc-search-form:focus-within{
   border: 0 none;
   box-shadow: none;
}

answered Jun 25 '20 at 13:38

Lalji Tadhani

14,041
3
23
40

score 1 · Answer 2 · answered Jun 25 '20 at 13:22

1

You can use outline: none; on focus

How to remove focus border (outline) around text/input boxes? (Chrome)

Be carefull for people who navigate with keyboard, it can be usefull

answered Jun 25 '20 at 13:22

Romain

45
7

I agree, always make _something_ happen on focus. Even if it's a background change or anything, make something happen. Anyone who uses the `tab` button will have difficulty finding what they are selecting if it is not clearly marked. gov.uk does this very well, and so does bbc.co.uk/bitesize. Both these sites put thick outlines around the focused elements. That's very good for accessibility. – corn on the cob Jun 25 '20 at 14:13

score 1 · Answer 3 · answered Jun 25 '20 at 13:56

1

Add this to your code: * { outline: none !important; }

answered Jun 25 '20 at 13:56

fdsafas

318
2
10

cant remove blue highlight chrome on focus

3 Answers3