Eliminar Safari / Chrome textinput / textarea glow

337

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.

Alec Smart
fuente
66
@Steve, otra razón para deshabilitarlo es si desea que el efecto de brillo funcione en todos los navegadores usando: focus en lugar del estilo de contorno mal soportado.
Langdon
90
Es realmente molesto cuando las personas comienzan una conversación filosófica sobre si algo es "lo correcto" cuando la pregunta es técnica.
tim
2
Estoy haciendo una hoja de cálculo en línea, Steve, por lo que sería apropiado para mi uso. Depende, pero si es solo una forma simple, entonces debe dejar el esquema tal como está.
william44isme
44
Creo que es perfectamente bien para desactivarlo y hacer una costumbre: efecto de enfoque con CSS ...
Ithil
Además, saber cómo deshabilitar algo no significa que sea irreversible. Cualquiera que trabaje para cualquier cliente sabe que puede querer ver algo renderizado de una manera y luego volver a cambiarlo a la forma original / predeterminada. Darles una conferencia sobre accesibilidad no cambiará ese deseo ni hará feliz a nadie.
JakeGould

Respuestas:

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

ajm
fuente
2
Perfecto, muchas gracias. También me pregunto, ¿puedo eliminar también la opción de cambio de tamaño de textarea (en la parte inferior derecha de textarea)?
Alec Smart
3
+1 por la precaución; Por favor trate de evitar hacer cualquier cosa que rompe las expectativas del usuario de cómo su plataforma lleva a cabo; en realidad puede estar perjudicando su productividad y haciendo que su sitio web sea más difícil de usar.
Rob
66
¡Elimine mi opción de cambio de tamaño de textarea chrome / safari bajo su propio riesgo! Lo encuentro realmente útil, indispensable incluso en algunos sitios.
JeeBee 01 de
55
para deshacerse del controlador de cambio de tamaño: cambiar el tamaño: ninguno;
Daniel
22
cuadro-sombra: ninguno;
Styks
92

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;
}
Carl W
fuente
Esto funciona, por ejemplo, para <button>elementos, que no se benefician particularmente del brillo al enfocar, ya que la mayoría de las veces hace clic en él.
kasimir
1
La respuesta aceptada no funcionó para mí en Chrome en OSX. Esta solución hizo el trabajo.
Bart
También utilizando esta técnica, puede mantener el enfoque, pero redefinir el valor del contorno para que sea un color sólido de su elección, etc. para adaptarse al estilo de su sitio si eliminarlo por completo no es completamente satisfactorio.
Neil Monroe
1
No funcionó para mí en la última versión de Chrome45.0.2454.101 m
J86
¡Esta respuesta de @ Carl-W no debe pasarse por alto! - Esto fue útil al usar jQuery para vincular a un ancla que era un div. Estaba recargando un iframe en el div, luego manualmente yendo al ancla sin volver a cargar. Se desplazaría hacia abajo en la página hacia el ancla, pero todo el div tenía un brillo azul exterior. ¡Se agregó este CSS en el elemento div, y funcionó! - NOTA: No utilicé :focuspara el selector, solo puse el outline-colory outline-styleen mi div css.
Wade
13

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;
Thomas Maas
fuente
3
También es posible permitir que el cambio de tamaño en una sola dirección, que puede fijar su interacción con algunos diseños sin desactivar por completo: los valores posibles de cambio de tamaño son none, both, horizontal, vertical, y inherit.
Boann
Me gusta la solución ofrecida aquí con '-webkit-look: none;' - elimina TODO el estilo de los elementos de entrada, para que pueda diseñarlos como lo necesite. ¡Gracias!
hanazair
No sé por qué esto tiene tantos votos positivos, no es una respuesta a la pregunta en absoluto.
paddotk
7

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
MineCMD
fuente
5

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

Miguel
fuente
4

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.

Wim Mostmans
fuente
2

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;
}
Kyle S
fuente
Gracias. .btn:active:focusfue necesario para eliminar el brillo mientras se mantenía presionado el botón.
homerjam
2

Esta solución funcionó para mí.

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

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;
}
vamsikrishnamannem
fuente
0
<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>
criss_ae
fuente
0

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;}
Rich Finelli
fuente
0

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.

Martyn Shutt
fuente
0

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

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

Y

 *{
     outline: none;   
   }
Santosh Khalse
fuente