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




alto color (10)

Esta pregunta ya tiene una respuesta aquí:

¿Alguien puede explicar cómo quitar 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á la entrada CSS que estoy usando:

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


Answers

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

Solución

*:focus {
    outline: 0;
}

PD: Usa outline:0 lugar de outline:none enfocado. Es válida y mejor práctica.


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

*:focus {
    outline: none;
}

Específico para alguna etiqueta, ej: etiqueta de entrada

input:focus {
   outline:none;
}

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

*:focus {
    outline: none;
}

input:focus {
    outline:none;
}

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


Descubrí que también puedes usar:

input:focus{
   border: transparent;
}

Conjunto

input:focus{
    outline: 0 none;
}

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


Este borde se usa para mostrar que el elemento está enfocado (es decir, puede escribir la entrada o presionar el botón con Entrar). Puede 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 enfoque del teclado, sin embargo, para facilitar su uso.

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

*:focus {
    outline: none;
}

<input style="border:none" >

Funciono bien para mi Deseaba tenerlo arreglado en el propio html ... :)


Mi método:

<div class="user__colors">
    <label><input type="color"/></label>
</div>

input {
    background-color: transparent;
    border: none;
    position: relative;
    width: 80px;
    height: 12px;
    &:after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: url(../img/color-palette.jpg) repeat-y 0 0;
        background-size: contain;
        top: 0;
        border-radius: 3px;
    }
}

Y se ve así: http://prntscr.com/gloozc

Pero si presiona Ctl + F5, verá la entrada original por un momento.





css google-chrome input border