¿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;
}
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;
}
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.
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;
}
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;
}