[Css] ¿Cómo reiniciar / eliminar el resaltado de entrada / borde de enfoque de Chrome?


Answers

Tenía que hacer todo lo siguiente para eliminarlo por completo

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

He visto que el cromo pone un borde más grueso en :focus pero parece que está apagado en mi caso, donde también he usado el radio del borde. ¿Hay alguna forma de eliminar eso?




El problema es cuando ya tienes un esquema. Chrome todavía cambia algo y es un verdadero dolor. No puedo encontrar qué cambiar:

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




usted podría simplemente establecer el outline: none; y borde a un color diferente en el foco.




Esto definitivamente funcionará. El esquema naranja ya no aparecerá. Común para todas las etiquetas:

*:focus {
    outline: none;
   }

Específico para algunas etiquetas, por ejemplo: etiqueta de entrada

input:focus{
   outline:none;
  }