Eliminar el brillo de entrada de texto/área de texto de Safari/Chrome
Me pregunto si es posible eliminar el brillo azul y amarillo predeterminado cuando hago clic en un área de entrada de texto/texto usando CSS.
Editar (11 años después): no haga esto a menos que vaya a proporcionar un respaldo para indicar qué elemento está activo. De lo contrario, esto perjudica la accesibilidad, ya que esencialmente elimina la indicación que muestra qué elemento de un documento tiene el foco. Imagina ser un usuario de teclado y no saber realmente con qué elemento puedes interactuar. Deje que la accesibilidad prevalezca sobre la estética aquí.
textarea, select, input, button { outline: none; }
Sin embargo, se ha argumentado que mantener el brillo/contorno es en realidad beneficioso para la accesibilidad, ya que puede ayudar a los usuarios a ver qué elemento está enfocado actualmente.
También puede utilizar el pseudoelemento ':focus' para apuntar solo a las entradas cuando el usuario las tenga seleccionadas.
Demostración: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
Este efecto también puede ocurrir en elementos que no son de entrada. He encontrado que lo siguiente funciona como una solución más general.
:focus {
outline-color: transparent;
outline-style: none;
}
Actualización: es posible que no tengas que usar el :focusselector. Si tiene un elemento, digamos <div id="mydiv">stuff</div>, y estaba obteniendo el brillo exterior en este elemento div, simplemente aplíquelo como de costumbre:
#mydiv {
outline-color: transparent;
outline-style: none;
}
