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 es realmente beneficioso para la accesibilidad, ya que puede ayudar a los usuarios a ver qué Elemento está enfocado actualmente.

También puede usar el pseudo-elemento ': foco' para apuntar solo a 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: es posible que no tenga que usar el :focusselector. Si tiene un elemento, digamos <div id="mydiv">stuff</div>, y estaba obteniendo el brillo exterior de este elemento div, simplemente aplique de la manera normal:

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

En el cambio de tamaño de textarea en navegadores basados ​​en webkit:

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

resize: none;

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

Para personalizar el aspecto 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;
}

Explicaré esto:

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

Experimenté esto en un divevento que tuvo un clic y después de 20 búsquedas, encontré este fragmento que me salvó el día.

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

Esto deshabilita el resaltado de botones predeterminado en los navegadores móviles webkit

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

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

Consulte este artículo que he escrito para explicar cómo eliminar el borde de manera accesible.

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

Si desea eliminar el brillo de los botones en Bootstrap (que en mi opinión no es necesariamente una mala experiencia de usuario), necesitará el siguiente código:

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

Esta solución funcionó para mí.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

algunas veces sucede que los botones también se usan a continuación para eliminar 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;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Me pareció útil eliminar el contorno en un tipo de botón de entrada de "puerta deslizante", porque el contorno no cubre la "tapa" derecha de la imagen de la puerta deslizante haciendo que el estado de enfoque se vea un poco torpe.

input.slidingdoorbutton:focus { outline: none;}

Solo necesitaba eliminar este efecto de mis campos de entrada de texto, y no pude lograr que las otras técnicas funcionen 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! Puede eliminar el borde azul también de todos los elementos HTML usando *

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

Y

 *{
     outline: none;   
   }