¿Cómo eliminar el borde (contorno) alrededor de los cuadros de texto/entrada? (Cromo) [duplicado]

Esta pregunta ya tiene una respuesta aquí:

¿Puede alguien explicar cómo eliminar el borde naranja o azul (contorno) alrededor de los cuadros de texto/entrada? Creo que solo sucede en Chrome para mostrar que la caja de entrada está activa. Aquí está la entrada CSS estoy usando: 

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

introduzca la descripción de la imagen aquí

Author: Cyral, 2010-08-03
Source

11 answers

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

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

Es posible que desee agregar alguna otra forma para que los usuarios sepan qué elemento tiene el enfoque del teclado, aunque para la usabilidad.

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

*:focus {
    outline: none;
}
 1855
Author: CEich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-05 20:34:00

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;
}
 102
Author: gwintrob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-21 03:43:55 
input:focus {
    outline:none;
}

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

 83
Author: azram19,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-14 00:31:51 
<input style="border:none" >

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

 48
Author: Kailas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-03 11:42:00

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

 34
Author: Joey Morani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-08-03 13:51:37

Solución

*:focus {
    outline: 0;
}

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

 23
Author: Touhid Rahman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-16 03:31:32

Este eliminar marco naranja en cromo de todos y cualquier elemento no importa qué y dónde está

*:focus {
    outline: none;
}
 20
Author: nonamehere,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-10 20:43:34

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;
}
 16
Author: Tabish,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-06 21:45:22

Descubrí que también puedes usar:

input:focus{
   border: transparent;
}
 10
Author: Refilon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-06 13:27:09

Conjunto 

input:focus{
    outline: 0 none;
}

"!importante " es por si acaso. Eso no es necesario. [Y ahora se ha ido. –Eréctil.]

 10
Author: madd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-15 14:28:12

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

*:focus {
    outline: none;
}

Específico para alguna etiqueta, por ejemplo: etiqueta de entrada

input:focus {
   outline:none;
}
 9
Author: Prashant Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-14 00:32:13