Eliminar Safari / Chrome textinput / textarea glow

Me pregunto si es posible eliminar el brillo azul y amarillo predeterminado cuando hago clic en una entrada de texto / área de texto usando CSS.

textarea, select, input, button { outline: none; } 

Sin embargo, se ha argumentado que mantener el brillo / contorno en realidad es beneficioso para la accesibilidad, ya que puede ayudar a los usuarios a ver qué elemento está actualmente enfocado.

También puede usar el pseudo-elemento ‘: focus’ para enfocar solo las entradas cuando el usuario las haya seleccionado.

Demostración: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Este efecto también puede ocurrir en elementos que no son de entrada. He encontrado los siguientes trabajos como una solución más general

 :focus { outline-color: transparent; outline-style: none; } 

Actualización: puede que no tenga que usar el selector de :focus . Si tiene un elemento, digamos

stuff

, y estaba obteniendo el resplandor externo en este elemento div, solo aplique como lo normal:

 #mydiv { outline-color: transparent; outline-style: none; } 

En el redimensionamiento de textarea en navegadores basados ​​en webkit:

Establecer max-height y max-width en el área de texto no eliminará el control de cambio de tamaño visual. Tratar:

 resize: none; 

(y sí, estoy de acuerdo con “tratar de evitar hacer cualquier cosa que rompa las expectativas del usuario”, pero a veces tiene sentido, es decir, en el contexto de una aplicación web)

Para personalizar la apariencia de los elementos de formulario webkit desde cero:

 -webkit-appearance: none; 

Carl W :

Este efecto también puede ocurrir en elementos que no son de entrada. He encontrado los siguientes trabajos como una solución más general

 :focus { outline-color: transparent; outline-style: none; } 

Voy a explicar esto:

  • :focus significa que estiliza los elementos que están en foco. Así que estamos diseñando los elementos en foco.
  • outline-color: transparent; significa que el resplandor azul es transparente.
  • outline-style: none; hace lo mismo

Esta es la solución para las personas que sí se preocupan por la accesibilidad .

Por favor, no use el outline:none; para deshabilitar el esquema de enfoque. Estás matando la accesibilidad de la web si haces esto. Hay una forma accesible de hacer esto.

Echa un vistazo a este artículo que he escrito para explicar cómo quitar el borde de una manera accesible.

La idea en resumen es mostrar solo el borde del contorno cuando detectamos un usuario de teclado. Una vez que un usuario comienza a usar su mouse, desactivamos el contorno. Como resultado, obtienes lo mejor de los dos.

Si desea eliminar el brillo de los botones en Bootstrap (que no es necesariamente un mal UX en mi opinión), necesitará el siguiente código:

 .btn:focus, .btn:active:focus, .btn.active:focus{ outline-color: transparent; outline-style: none; } 

Experimenté esto en un div que tenía un evento de clic y después de 20 algunas búsquedas encontré este fragmento que me salvó el día.

 -webkit-tap-highlight-color: rgba(0,0,0,0); 

Esto desactiva el resaltado predeterminado del botón en navegadores webkit para dispositivos móviles

algunas veces sucede botones también, luego usa debajo para quitar la línea externa

 input:hover input:active, input:focus, textarea:active, textarea:hover, textarea:focus, button:focus, button:active, button:hover { outline:0px !important; } 
   

Me pareció útil eliminar el contorno de un botón de entrada de “puerta corredera”, porque el contorno no cubre la “tapa” derecha de la imagen de la puerta corredera, haciendo que el estado de enfoque parezca un poco inestable.

 input.slidingdoorbutton:focus { outline: none;} 

Solo necesitaba eliminar este efecto de mis campos de entrada de texto, y no pude lograr que las demás técnicas funcionaran correctamente, pero esto es lo que funciona para mí;

 input[type="text"], input[type="text"]:focus{ outline: 0; border:none; box-shadow:none; } 

Probado en Firefox y en Chrome.

¡Por supuesto! También puede eliminar el borde azul de todos los elementos HTML usando *

 *{ outline-color: transparent; outline-style: none; } 

Y

  *{ outline: none; }