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

User · Answer

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

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

Example:

_x000D_

button {_x000D_
  border-radius: 20px;_x000D_
  padding: 20px;_x000D_
}_x000D_
_x000D_
.no-focusborder:focus {_x000D_
  outline-style: none;_x000D_
  box-shadow: none;_x000D_
  border-color: transparent;_x000D_
  background-color: black;_x000D_
  color: white;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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     -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to google-chrome

Examples related to focus

Examples related to border