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?

Solution 1

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.

Solution 2

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/>

Solution 3

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}

:-)

Solution 4

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;
  }

Solution 5

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

This should do the trick.

View more solutions

Comments

[Jiew Meng]

i did change the background-color and color properties/attributes (whatever u call it) on :focus so i guess its still ok

[Amit Patil]

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.

[WhyNotHugo]

+1 on the note for this being a VERY bad practice. It would make keyboard usage very annoying.

[eselk]

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.

[Tyguy7]

This should be the top answer, its the only one that completely removes the shadow/border on focus.

[ovk]

The only solution that works

[cawecoy]

finally I found one that works on mobile!

[rerat]

Tried quite a few other things, but this is the only one that worked.

[clde]

This is the one that only worked for me

[jdgregson]

But for a mobile navigation menu based on a select dropdown, this is very good practice.

[aroth]

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.

[Cyan Baltazar]

Thanks, worked for me!

[Yosep Tito]

try this css, it work for me -> textarea:focus, input:focus{ border: none; }