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

0 votes
asked May 31, 2010 by jiew-meng

This question already has an answer here:

7 Answers

0 votes
answered Jan 24, 2010 by asawilliams

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

0 votes
answered May 6, 2011 by meditation-room

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}

:-)

0 votes
answered Jan 19, 2013 by prashant-gupta

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;
  }
0 votes
answered May 8, 2013 by george

I had to do all of the follow to completely remove it

outline-style:none;
box-shadow:none;
border-color:transparent;
0 votes
answered Jan 20, 2014 by noelietrex
border:0;
outline:none;
box-shadow:none;

This should do the trick.

0 votes
answered Jan 29, 2014 by alain-zelink

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

No focus With focus

0 votes
answered Jan 31, 2014 by miksiii

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.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...