Wie kann man die Eingabehervorhebung / den Fokusrahmen von Chrome zurücksetzen / entfernen?

Question

Ich habe gesehen, dass Chrom einen dickeren Rand auf :focus aber in meinem Fall, in dem ich auch border-radius verwendet habe, sieht es irgendwie anders aus. Gibt es eine Möglichkeit, das zu entfernen?

Answer 1

Am einfachsten ist es, etwas wie dieses zu verwenden, aber beachten Sie, dass es möglicherweise nicht so gut ist.

input {
  outline: none;
}

Ich hoffe, Sie finden dies nützlich.

Answer 2

Könnten Sie einfach outline: none; und die Umrandung in einer anderen Farbe, wenn sie scharf ist.

Answer 3

Das Problem ist, wenn Sie bereits eine Gliederung haben. Chrome ändert immer noch etwas, und das ist eine echte Qual. Ich kann nicht finden, was ich ändern soll:

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