How to reset / remove chrome's input highlighting / focus border? [duplicate] - css

Question

This question already has answers here:
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 7 years ago.
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?

Answer 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.

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

Answer 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}
:-)

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

Answer 5

border:0;
outline:none;
box-shadow:none;
This should do the trick.

Answer 6

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.

Answer 7

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

Answer 8

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