¿Cómo restablecer/eliminar el resaltado de entrada/borde de enfoque de Chrome? [duplicar]
He visto que Chrome pone un borde más grueso, :focuspero en mi caso se ve mal, donde también usé border-radius. ¿Hay alguna forma de eliminar eso?
Deberías poder eliminarlo usando
outline: none;
pero tenga en cuenta que esto es potencialmente malo para la usabilidad: será difícil saber si un elemento está enfocado, lo que puede ser una mierda cuando recorre todos los elementos de un formulario usando la clave Tab; debe reflexionar de alguna manera cuando un elemento está enfocado.
Tuve que hacer todo lo siguiente para eliminarlo por completo:
outline-style: none;
box-shadow: none;
border-color: transparent;
Ejemplo:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
Para eliminar el foco predeterminado, use lo siguiente en su archivo .css predeterminado:
:focus {outline:none;}
Luego puede controlar el color del borde de enfoque individualmente por elemento o en el .css predeterminado:
:focus {outline:none;border:1px solid red}
Obviamente reemplácelo redcon el código hexadecimal elegido.
También puedes dejar el borde intacto y controlar el color de fondo (o imagen) para resaltar el campo:
:focus {outline:none;background-color:red}
:-)
Esto definitivamente funcionará. El contorno naranja ya no aparecerá. Común para todas las etiquetas:
*:focus {
outline: none;
}
Específico de alguna etiqueta, por ejemplo: etiqueta de entrada
input:focus{
outline:none;
}
La forma más sencilla es utilizar algo como esto, pero tenga en cuenta que puede que no sea tan bueno.
input {
outline: none;
}
Espero que encuentres esto útil.
