¿Cómo eliminar el borde de enfoque (contorno) alrededor de los cuadros de texto/entrada? (Cromo) [duplicado]
¿Alguien puede explicar cómo eliminar el borde (contorno) naranja o azul alrededor de los cuadros de texto/entrada? Creo que solo ocurre en Chrome para mostrar que el cuadro de entrada está activo. Aquí está el CSS de entrada que estoy usando:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
Este borde se utiliza para mostrar que el elemento está enfocado (es decir, puede escribir la entrada o presionar el botón Enter). Sin embargo, puedes eliminarlo con la propiedad de contorno :
textarea:focus, input:focus{
outline: none;
}
Es posible que desee agregar alguna otra forma para que los usuarios sepan qué elemento tiene el foco del teclado por razones de usabilidad.
Chrome también aplicará resaltado a otros elementos, como los DIV utilizados como modales. Para evitar que se resalten esos y todos los demás elementos, puede hacer:
*:focus {
outline: none;
}
⚠️ Advertencia de accesibilidad
Tenga en cuenta que eliminar el esquema de la entrada es una mala práctica de accesibilidad. Los usuarios que utilicen lectores de pantalla no podrán ver hacia dónde está enfocado el puntero. Más información en a11yproject
La respuesta actual no funcionó para mí con Bootstrap 3.1.1. Esto es lo que tuve que anular:
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
