¿Cómo eliminar el borde (contorno) alrededor de cuadros de texto / entrada? (Chrome)

¿Alguien puede explicar cómo eliminar el borde naranja o azul (contorno) alrededor de los cuadros de texto / entrada? Creo que solo ocurre en Chrome para mostrar que el cuadro de entrada está activo. Aquí está el CSS de entrada que estoy usando:

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

enter image description here

Este borde se usa para mostrar que el elemento está enfocado (es decir, puede escribir la entrada o presionar el botón con Enter). Puedes eliminarlo, sin embargo:

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

Es posible que desee agregar alguna otra forma para que los usuarios sepan qué elemento tiene el foco del teclado para uso.

Chrome también aplicará el resaltado a otros elementos como los DIV utilizados como modales. Para evitar resaltar esos y todos los otros elementos, puede hacer:

 *:focus { outline: none; } 

La respuesta actual no funcionó para mí con Bootstrap 3.1.1. Esto es lo que tuve que anular:

 .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } 
 input:focus { outline:none; } 

Esto lo hara. El contorno naranja ya no aparecerá.

  

Funcionó bien para mí Quería tenerlo arreglado en html en sí … 🙂

Encontré la solución.
Utilicé: outline:none; en el CSS y parece haber funcionado. De todas formas, gracias por la ayuda. 🙂

Solución

 *:focus { outline: 0; } 

PD: Use outline:0 lugar de outline:none en foco. Es una práctica válida y mejor.

esto elimina el marco naranja en cromo de todos y cualquier elemento sin importar qué y dónde está

 *:focus { outline: none; } 

Utilice la siguiente syntax para eliminar el borde del cuadro de texto y eliminar el borde resaltado del estilo del navegador.

 input { background-color:transparent; border: 0px solid; height:30px; width:260px; } input:focus { outline:none; } 

Descubrí que también puedes usar:

 input:focus{ border: transparent; } 

Conjunto

 input:focus{ outline: 0 none; } 

“! importante” es solo por si acaso. Eso no es necesario. [Y ahora se ha ido. -Ed.]

Esto definitivamente funcionará. El contorno naranja ya no se mostrará. Común para todas las tags:

 *:focus { outline: none; } 

Específico para algunas tags, por ejemplo: etiqueta de entrada

 input:focus { outline:none; } 
    Intereting Posts