¿Cómo eliminar el borde de enfoque (contorno) alrededor de los 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 sólo ocurre en Chrome para mostrar que el cuadro de entrada está activo. Aquí's el CSS de entrada I'm utilizando:

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

Comentarios sobre la pregunta (4)
Solución

Este borde se utiliza para mostrar que el elemento está enfocado (es decir, que puede escribir la entrada o pulsar el botón con Intro). Sin embargo, puede eliminarlo:

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

Es posible que desee añadir alguna otra manera para que los usuarios sepan qué elemento tiene el foco del teclado, aunque para la usabilidad.

Chrome también aplicará el resaltado a otros elementos como DIV's utilizados como modales. Para prevenir el resaltado en esos y todos los otros elementos también, puedes hacer:

*:focus {
    outline: none;
}
Comentarios (16)

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;
}
Comentarios (5)
input:focus {
    outline:none;
}

Esto servirá. El contorno naranja ya no aparecerá.

Comentarios (3)
<input style="border:none" >

Funcionó bien para mí. Deseaba que se arreglara en el mismo html ... :)

Comentarios (5)

He encontrado la solución.
He utilizado outline:none; en el CSS y parece que ha funcionado. Gracias por la ayuda de todos modos :)

Comentarios (2)

Solución

*:focus {
    outline: 0;
}

P.D: Usa "outtline:0" en lugar de "outtline:none" en el foco. Es válido y mejor práctica.

Comentarios (1)

esto elimina el marco naranja en cromo de todos y cada uno de los elementos, sin importar qué y dónde está.

*:focus {
    outline: none;
}
Comentarios (0)

Por favor, utilice la siguiente sintaxis 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;
}
Comentarios (1)

Set

input:focus{
    outline: 0 none;
}

...importante..; es por si acaso. Eso no es necesario. Y ahora se ha ido. ...y no es necesario.]

Comentarios (2)

Esto definitivamente funcionará. El contorno naranja no se verá más ... Común para todas las etiquetas:

*:focus {
    outline: none;
}

Específico de alguna etiqueta, ex: etiqueta de entrada

input:focus {
   outline:none;
}
Comentarios (0)

Descubrí que también puedes usar:

input:focus{
   border: transparent;
}
Comentarios (0)