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

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?

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