How to reset / remove chrome's input highlighting / focus border? [duplicate]
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.
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/>
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}:-)