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

Question

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

Answer 1

Usted debe ser capaz de eliminarlo mediante

outline: none; 

pero tenga en cuenta que es potencialmente malo para la facilidad de uso: Será difícil saber si un elemento está enfocada, lo que puede aspirar Cuando recorre todos los elementos de un formulario con la tecla Tab, debe reflejar de algún modo cuando se enfoca un elemento.

Answer 2

puede simplemente configurar outline: none; y bordear un color diferente en el enfoque.

Answer 3

Para quitar el foco predeterminado, utilice el siguiente en el archivo .css por defecto:

:focus {outline:none;} 

entonces usted puede controlar el color del borde de enfoque, ya sea individualmente por elemento, o en el css por defecto:

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

Obviamente reemplace red con el código hexadecimal elegido.

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

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

:-)

Answer 4

Esto sin duda va a funcionar. esbozo de naranja no se mostrará más .. Común para todas las etiquetas:

*:focus { 
    outline: none; 
    } 

específico en cierta etiqueta, por ejemplo: etiqueta de entrada

input:focus{ 
    outline:none; 
    } 

Answer 5

que tenía que hacer todo el seguimiento de eliminar por completo es

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

Answer 6

El problema es cuando ya tiene un esquema. Chrome todavía cambia algo y es un verdadero dolor. No puedo encontrar qué hay que 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; 
} 

Answer 7

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

input { 
    outline: none; 
} 

Espero que le sea útil.

Answer 8

border:0; 
outline:none; 
box-shadow:none; 

Esto debería hacer el truco.