css - quitar - Eliminar Safari/Chrome textinput/textarea glow

safari input blue border

Question

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.

Answer 1

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

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

Y

 *{
     outline: none;   
   }

Answer 2

Algunas veces, también sucede con los botones que 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;
}

Answer 3

En textarea redimensionar en navegadores basados ​​en webkit:

La configuración de altura máxima y anchura máxima 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 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 de webkit desde cero:

-webkit-appearance: none;

Answer 4

Esta es la solución para las personas que 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 eliminar el borde de una 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.

Answer 5

Este efecto también puede ocurrir en elementos sin 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 :focus selector de :focus . Si tienes un elemento, di <div id="mydiv">stuff</div> , y <div id="mydiv">stuff</div> el brillo externo en este elemento div, solo aplica como es normal:

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

Answer 6

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

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

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

Answer 7

Me resultó útil quitar el contorno de un botón de entrada del tipo de "puerta deslizante", ya que el contorno no cubre la "tapa" correcta de la imagen de la puerta deslizante, lo que hace que el estado de enfoque se vea un poco extraño.

input.slidingdoorbutton:focus { outline: none;}

Answer 8

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

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

Answer 9

Solo necesitaba eliminar este efecto de mis campos de entrada de texto, y no pude hacer que las otras técnicas funcionaran bien, 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.

Answer 10

Carl W :

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

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

Te explico esto:

• :focus significa que da estilo a los elementos que están enfocados. 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

Answer 11

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

Aunque, 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 '': focus'' para apuntar solo a las entradas cuando el usuario las tiene seleccionadas.

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

Answer 12

<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>