How to reset / remove chrome's input highlighting / focus border?

Question

I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

image: chrome :focus border

try this css, it work for me `textarea:focus, input:focus{ border: none; }` — Yosep Tito, Jun 25 '20 at 09:41

score 873 · Accepted Answer · edited Aug 08 '16 at 14:20

873

You should be able to remove it using

outline: none;

but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

edited Aug 08 '16 at 14:20

Andrew Tobilko

48,120
14
91
142

answered May 31 '10 at 12:41

Pekka

442,112
142
972
1,088

8

i did change the `background-color` and `color` properties/attributes (whatever u call it) on `:focus` so i guess its still ok – Jiew Meng May 31 '10 at 13:09
10

Yep. Globally setting `outline: none` like some resets do is a mistake as it degrades keyboard accessibility, but it's fine to remove `outline` if you've got another cleart way of reflecting focusedness. – bobince May 31 '10 at 13:23
13

+1 on the note for this being a VERY bad practice. It would make keyboard usage very annoying. – WhyNotHugo Jul 26 '12 at 15:39
17

It's a horrible idea by Chrome, but nice they made it easy to turn off. Of course it's bad practice if you don't do something else to show focus, but who's going to do something that silly? It will look nice on maybe 1% of websites these days, since everyone is doing everything totally custom. Using "standard" looking controls is a thing of the past. – eselk Dec 13 '12 at 20:04
1

But for a mobile navigation menu based on a `select` dropdown, this is very good practice. – jdgregson Feb 12 '17 at 09:54
try this css, it work for me -> textarea:focus, input:focus{ border: none; } – Yosep Tito Jun 25 '20 at 09:41

George · Answer 2 · 2020-06-10T17:51:28.763

164

I had to do all of the following to completely remove it:

outline-style: none;
box-shadow: none;
border-color: transparent;

Example:

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}

<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>

edited Jun 10 '20 at 17:51

answered Jul 08 '13 at 12:17

George

4,323
3
30
33

24

This should be the top answer, its the only one that completely removes the shadow/border on focus. – Tyguy7 Jul 11 '14 at 22:04
3

finally I found one that works on mobile! – cawecoy Apr 02 '15 at 10:30
3

Tried quite a few other things, but this is the only one that worked. – rerat May 26 '16 at 21:44
3

This is the one that only worked for me – clde Jun 08 '16 at 13:07
1

This answer gets the closest, but still leaves a gray outline/shadow around the top edge of the input box. To get rid of that I had to add a `background: white;` as well. – aroth Apr 12 '17 at 00:47
2

Thanks, worked for me! – Cyan Baltazar Aug 04 '17 at 05:31

score 84 · Answer 3 · edited Nov 17 '12 at 21:11

To remove the default focus, use the following in your default .css file :

:focus {outline:none;}

You can then control the focus border color either individually by element, or in the default .css:

:focus {outline:none;border:1px solid red}

Obviously replace red with your chosen hex code.

You could also leave the border untouched and control the background color (or image) to highlight the field:

:focus {outline:none;background-color:red}

:-)

score 25 · Answer 4 · answered Apr 19 '13 at 06:29

25

This will definitely work. Orange outline won't show up anymore.. Common for all tags:

*:focus {
    outline: none;
   }

Specific to some tag, ex: input tag

input:focus{
   outline:none;
  }

answered Apr 19 '13 at 06:29

Prashant Gupta

641
9
10

score 16 · Answer 5 · answered Aug 20 '14 at 16:47

16

border:0;
outline:none;
box-shadow:none;

This should do the trick.

answered Aug 20 '14 at 16:47

noelietrex

321
1
3
8

score 12 · Answer 6 · edited Jun 23 '15 at 16:07

12

The simpliest way is to use something like this but note that it may not be that good.

input {
  outline: none;
}

I hope you find this useful.

edited Jun 23 '15 at 16:07

dippas

58,591
15
114
126

answered Jul 31 '14 at 13:34

miksiii

2,426
26
22

score 6 · Answer 7 · edited Aug 22 '12 at 10:35

6

you could just set outline: none; and border to a different color on focus.

edited Aug 22 '12 at 10:35

Lloyd Powell

18,270
17
87
123

answered Jul 24 '10 at 01:12

asawilliams

2,908
2
30
54

score 5 · Answer 8 · answered Apr 29 '14 at 19:57

Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

No focus With focus

How to reset / remove chrome's input highlighting / focus border?

8 Answers8

Linked

Related