Cómo eliminar el resaltado de borde en un elemento de texto de entrada

Cuando un elemento html está ‘enfocado’ (actualmente seleccionado / tabulado), muchos navegadores (al menos Safari y Chrome) colocarán un borde azul alrededor del mismo.

Para el diseño en el que estoy trabajando, esto es una distracción y no se ve bien.

 

FireFox no parece hacer esto, o al menos, me permitirá controlarlo con

 border: x; 

Si alguien me puede decir cómo se desempeña IE, sería curioso.

Pero conseguir que Safari elimine esta pequeña llamarada sería bueno.

En tu caso, prueba:

 input.middle:focus { outline-width: 0; } 

O, en general, para afectar a todos los elementos de forma básicos:

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

En los comentarios, Noah Whitmore sugirió llevar esto aún más lejos para admitir elementos que tienen el atributo contenteditable establecido en true (lo que los convierte efectivamente en un tipo de elemento de entrada). Los siguientes también deberían dirigirse a esos (en navegadores con capacidad CSS3):

 [contenteditable="true"]:focus { outline: none; } 

Aunque no lo recomendaría, para mayor completitud, siempre puedes deshabilitar el esquema de enfoque en todo con esto:

 *:focus { outline: none; } 

Tenga en cuenta que el esquema de enfoque es una función de accesibilidad y usabilidad; indica al usuario en qué elemento se enfoca actualmente.

Para eliminarlo de todas las entradas

 input { outline:none; } 

Este es un hilo viejo, pero como referencia es importante tener en cuenta que no se recomienda deshabilitar el contorno de un elemento de entrada, ya que dificulta la accesibilidad.

La propiedad del esquema está ahí por una razón: proporciona a los usuarios una indicación clara del foco del teclado. Para obtener más información y fonts adicionales sobre este tema, consulte http://outlinenone.com/

Usa este código:

 input:focus { outline: 0; } 

¡Podrías usar CSS para deshabilitar eso! Este es el código que uso para deshabilitar el borde azul:

 *:focus { outline: none; } 

¡Esto eliminará el borde azul!

Este es un ejemplo de trabajo: JSfiddle.net

¡Espero eso ayude!

Esta es una preocupación común.

El esquema predeterminado que muestran los navegadores es feo.

Vea esto por ejemplo:

 form, label { margin: 1em auto; } label { display: block; } 
 

Puedes probar esto también

 input[type="text"] { outline-style: none; } 

o

 .classname input{ outline-style: none; } 

Elimine el contorno cuando el foco esté en el elemento, utilizando la propiedad CSS debajo:

 input:focus { outline: 0; } 

Esta propiedad de CSS elimina el esquema de todos los campos de entrada en el foco o utiliza pseudoclase para eliminar el contorno del elemento utilizando la propiedad de CSS siguiente.

 .className input:focus { outline: 0; } 

Esta propiedad elimina el contorno del elemento seleccionado.

La eliminación de todos los estilos de enfoque es mala para los usuarios de accesibilidad y teclado en general. Pero los contornos son feos y proporcionar un estilo centrado personalizado para cada elemento interactivo puede ser un verdadero dolor.

Entonces, el mejor compromiso que he encontrado es mostrar los estilos de esquema solo cuando detectamos que el usuario está usando el teclado para navegar. Básicamente, si el usuario presiona TAB, mostramos los contornos y si usa el mouse, los ocultamos.

No le impide escribir estilos de enfoque personalizados para algunos elementos, pero al menos proporciona un buen valor predeterminado.

Así es como lo hago:

 // detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) { const { body } = document; if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); }); 
 body:not(.keyboardUser) *:focus { outline: none; } 
 

By default, you'll see no outline. But press TAB key and you'll see focussed element

This is anchor link

Probé todas las respuestas y todavía no pude hacer que las mías trabajasen en Mobile , hasta que encontré -webkit-tap-highlight-color .

Entonces, lo que funcionó para mí es …

 * { -webkit-tap-highlight-color: transparent; } 

Esto me confundió por un tiempo hasta que descubrí que la línea no era ni un borde ni un contorno, era una sombra. Entonces para quitarlo tuve que usar esto:

 input:focus, input.form-control:focus { outline:none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } 

Prueba esto también

 .form-group input { display: block; background: none; padding: 0.175rem 0.175rem 0.0875rem; font-size: 1.4rem; border-width: 0; border-color: transparent; line-height: 1.9; width: 100%; color: #ccc; transition: all 0.28s ease; box-shadow: none; } 

Ninguna de las soluciones funcionó para mí en Firefox.

La siguiente solución cambia el estilo de borde en el foco para Firefox y establece el contorno en ninguno para otros navegadores.

De hecho, hice que el borde del foco pasara de un brillo azul de 3 píxeles a un estilo de borde que coincida con el borde del área de texto. Aquí hay algunos estilos de bordes:

Borde discontinuo (borde 2px rojo punteado): Borde rayado. borde 2px rojo punteado

¡Sin bordes! (borde 0px):
Sin bordes. borde: 0px

Borde de textarea (borde 1px gris sólido): Borde de Textarea. borde 1px gris sólido

Aquí está el código:

 input:focus, textarea:focus { outline: none; /** For Safari, etc **/ border:1px solid gray; /** For Firefox **/ } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; } 
  

Puede eliminar el borde naranja o azul (contorno) alrededor de cuadros de texto / entrada usando: outline: none

 input { background-color: transparent; border: 0px solid; height: 20px; width: 160px; color: #CCC; outline:none !important; }