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

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?

imagen: cromo: frontera de enfoque

Deberías poder eliminarlo usando

 outline: none; 

pero ten en cuenta que esto es potencialmente malo para la usabilidad: será difícil saber si un elemento está enfocado, lo que puede apestar cuando pasas por todos los elementos de un formulario usando la tecla Tab : deberías reflejar de alguna manera cuando un elemento está enfocado.

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

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

Para eliminar el enfoque predeterminado, use lo siguiente en su archivo .css predeterminado:

 :focus {outline:none;} 

A continuación, puede controlar el color del borde de enfoque individualmente por elemento o en el .css predeterminado:

 :focus {outline:none;border:1px solid red} 

Obviamente reemplaza el red con tu código de hex elegido.

También puede dejar intacto el borde y controlar el color de fondo (o la imagen) para resaltar el campo:

 :focus {outline:none;background-color:red} 

🙂

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

 *:focus { outline: none; } 

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

 input:focus{ outline:none; } 
 border:0; outline:none; box-shadow:none; 

Esto debería funcionar.

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

La forma más sencilla es usar algo como esto, pero tenga en cuenta que puede no ser tan bueno.

 input { outline: none; } 

Espero que encuentres esto útil.

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

Sin enfoqueCon enfoque

    Intereting Posts