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 · Accepted 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

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

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

I had to do all of the following to completely remove it   outline-style  none  box-shadow  none  border-color  transparent    Example   x000D   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   lt p gt Click in the white space  then press the  Tab  key  lt  p gt  x000D   lt button gt Button 1  unchanged  lt  button gt  x000D   lt button class  no-focusborder  gt Button 2  no focus border  custom focus indicator to show focus is present but the unwanted highlight is gone  lt  button gt  x000D   lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  x000D   x000D   x000D

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

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

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

[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