5

El navegador de Chrome tenía por defecto un color amarillo de fondo de un input cuando era autocompletado. Buscando un poco por Internet encontré un código que permitía sustituir ese estilo fácilmente:

*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:active,
*:-webkit-autofill:focus {
  -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
  100% {
    background:  0 0;
    color: inherit;
  }
}

@-webkit-keyframes autofill {
  100% {
      background:  0 0;
      color: inherit;
  }
}

Creo que el navegador se ha actualizado hace poco y, ahora, este color amarillo por defecto es azul (rgb(232, 240, 254) específicamente), o se ha añadido ese color de alguna manera. Y aquí es donde entra mi problema, el código que utilicé ya no funciona ya que user agent stylesheet le da un estilo más específico:

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

Al ver esto, he decidido contraatacar machacando este estilo de la siguiente manera:

input:-internal-autofill-selected {
  background: red!important;
  color: red;
}

Sin embargo, no consigo que utilice el mío y no el predeterminado. La cosa está en que, según el inspector de código, está utilizando mi código. Aquí es dónde mi entendimiento llega a su límite:

introducir la descripción de la imagen aquí

Esta captura es del mismo inspector, según los estilos que está aplicando sobre el elemento, el fondo es del color azul de Chrome, pero, si despliegas de dónde está cogiendo esos estilos, dice que está utilizando el color rojo de mi estilo.

Llevo unas horas pegándome contra esto, seleccionando el elemento de forma más precisa (con clases, id, etc.), pero el resultado es siempre el mismo ya que, técnicamente, está utilizando mi estilo.

Edit: Como han comentado por las respuestas y he leído por Internet, hay formas de sustituir el color de fondo aplicándole una sombra por encima que lo cubra, pero no es algo que resuelva mi problema ya que el input al que quiero aplicarle estilos está sobre un contenedor con fondo en degradado. Me interesa que se siga viendo ese degradado y no puedo calcular el color que tendrá en el punto exacto del input, por lo que la idea era que no tuviera color de fondo (que fuera transparente).

He comprobado que tanto en Microsoft Edge y Firefox funciona perfectamente, ya que, supongo, el código que se aplica es propio de Chrome.

¿Alguna idea de a qué se puede deber y cómo solucionarlo?

2
  • He estado leyendo la publicación, ¿el fondo que tu quieres es un degradado? Commented el 3 jun. 2019 a las 19:47
  • Ahora editaré la pregunta ya que veo que hay formas de camuflar este fondo. El input al que quiero aplicarle estilos está sobre un contenedor con fondo en degradado. Me interesa que se siga viendo ese degradado y no puedo calcular el color que tendrá en el punto exacto del input, por lo que la idea era que no tuviera color de fondo (que fuera transparente)
    – Rabegi
    Commented el 4 jun. 2019 a las 6:44

3 respuestas 3

3

Puedes generar una sombra interna para el input y que de esta manera no se vea el color del fondo.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 10px white inset;
}

No sobrescribirá el color del fondo, pero lo ocultará y hará el mismo efecto que si lo sobrescribieras.


EDIT: Como en tu caso lo que quieres hacer es que el fondo sea transparente, tendrás que establecer el background de tu input de la manera habitual.

Después, y con ayuda de un "hack", podrás hacer que tu input tenga el fondo transparente.

El "hack" consiste en hacer uso de la propiedad -webkit-transition-delay. Como tu estilo original va a ser background: transparent, lo que hará será retrasar el cambio de background al azul (la transición en sí entre un color y otro) que tiene por defecto el Chrome. Te recomiendo que le pongas un valor alto para retrasar lo máximo posible el cambio de background.

¿Ventajas?: Solo afectará a los navegadores con Webkit, es decir, no afectará a Edge o Firefox, los cuales ya te funcionan perfectamente.

¿Desventajas?: Si el usuario está en la página durante más tiempo del que has indicado en la propiedad -webkit-transition-delay, el usuario verá el color azul de fondo. Es por eso que te recomiendo poner un valor alto para que sea bastante improbable que el usuario acabe viendo el cambio.

Te dejo un ejemplo donde se ve claramente que el input tiene fondo transparente aún después del autocompletado y que respeta el degradado de detrás (aunque por tiempo limitado):

body{
  background-image:  linear-gradient(red, yellow, green);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#inputTransparente{
  margin-top: 50px;
  background-color: transparent;
}

#inputTransparente:-webkit-autofill,
#inputTransparente:-webkit-autofill:hover,
#inputTransparente:-webkit-autofill:focus,
#inputTransparente:-webkit-autofill:active {
  -webkit-transition-delay: 99999999s;
}
<form name="formulario" method="POST">
   <input id="inputTransparente" type="text" name="nombre" placeholder="Dato" autocomplete><br>
   <input type="reset" value="Borrar campos">
</form>

4
  • He editado la pregunta. Si bien lo que dices es una solución válida, mi idea es que el fondo del input fuera transparente, por lo que no puedo aplicarle algo que cubra ese fondo. Supongo que realmente no hay forma de desactivar/sustituir este estilo...
    – Rabegi
    Commented el 4 jun. 2019 a las 6:47
  • Hola @Rabegi he actualizado mi respuesta con un ejemplo que creo que te puede servir. No es del todo una solución, pero es el único "hack" que he encontrado para solventarlo (aunque sea por tiempo limitado). Espero que te sirva :) Commented el 4 jun. 2019 a las 22:23
  • ¡Funciona perfectamente! No es una solución muy elegante, pero, por lo que he ido viendo, es la única que funciona. No había pensado en algo así, la verdad, ha sido muy ingenioso. Muchas gracias :)
    – Rabegi
    Commented el 5 jun. 2019 a las 6:51
  • 1
    @Rabegi La verdad es que sigo sin entender porque ponen tan difícil sobrescribir estilos básicos como este y que te pueden afectar tan negativamente a la interfaz de una página. Commented el 5 jun. 2019 a las 7:16
0

Prueba con

input:-internal-autofill-selected {
   background: red!important;
   color: red;
   background-color: red!important;
}
3
  • Buen punto, por un momento se me ha venido el mundo abajo por pensar que el error podría estar en algo tan obvio y no haberlo pensado. De verdad, no lo digo con ironía. Desgraciadamente tampoco ha funcionado, sigue saliendo igual que antes, el inspector dice estar aplicando esos estilos (menos el de color ya que no lleva !important y el de user agent stylesheet sí), pero visualmente sigue mostrando los otros...
    – Rabegi
    Commented el 3 jun. 2019 a las 12:06
  • Entonces no se que mas probar. Quizas además de -internal-autofill-selected hay mas -internal-autofill y chrome está aplicando otro? Commented el 3 jun. 2019 a las 12:19
  • 1
    En principio no, he revisado todos los estilos que se le aplican y no hay ninguno parecido (están los que se aplican a input normales solo). De la captura que dejé en la pregunta, el que añade el color de fondo que se está utilizando es solo input:-internal-autofill-selected. Gracias igualmente :)
    – Rabegi
    Commented el 3 jun. 2019 a las 13:21
0

Me he dado cuenta que al auto completar puedo copiar el texto del input y pegarlo nuevamente es allí donde ocurre la magia desaparece el fondo azul, entonces me pregunté Puedo hacer esto con Javascript? y me puse mano a la obra

La solución a este problema es Javascript Unas pocas lineas de código js serán suficiente

he activado un escuchador de evento para mi formulario y estará pendiente de los cambios efectuado dentro de mi formulario y cuando esto ocurre puedo recuperar el elemento que hizo el cambio lo que me da la posibilidad de obtener su valor, guardarlo en una variable, eliminarlo y asignar un nuevo valor.

Así después de varias pruebas logre dar con la solución. :)

const miForm = document.querySelector("Form")

function autoFill(event){
const nodos = Array.from(event.currentTarget.elements).filter(el=>el.nodeName=='INPUT')
let name = ""
nodos.forEach(el=>{
    setTimeout(()=>{
        name = el.value
        el.value = ""
        el.value = name
    },10)
})
}
miForm.addEventListener("change",e=>{
autoFill(e)
})
miForm.addEventListener("focusout",e=>{
autoFill(e)
})
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
}


#setClientForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 360px;
    min-height: 250px;
    border-radius: 20px;
    gap: 10px;
}

#setClientForm button{
    width: 50%;
    padding: 5px;
    border-radius: 20px;
}
#setClientForm button:hover{
    width: 40%;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
}

#fClientData{
    width: 90%;
}

#fClientData label{
    display: inline-block;
    width: 40%;
    text-align: right;
}
#fClientData select,#fClientData input:focus{border-color: orange; outline: none; background: none;}

#fClientData select, #fClientData input{
    display: inline-block;
    width: 55%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    background: none;
}

input:-internal-autofill-selected {
    background: red!important;
    color: red;
    background-color: red!important;
 }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AutoFill</title>
</head>
<body>
    
        <form action="#" id="setClientForm">
            <h3>Formulario</h3>
            <div id="fClientData">
                <label for="">Nombre:</label>
                <input type="text" name="" id="fClientName">
                <label for="">Apellido:</label>
                <input type="text" name="" id="fClientLastName">
                <label for="">Sobrenombre:</label>
                <input type="text" name="" id="fClientNickName">
                <label for="">Teléfono:</label>
                <input type="text" name="" id="fClientPhone">
                <label for="">Diección:</label>
                <input type="text" name="" id="fClientAddres">
                <label for="">Nacionalida:</label>
                <input type="text" name="" id="fClientNationality">
                <label for="">Documento:</label>
                <select name="" id="fClientDocumentType">
                    <option value="">Cedula</option>
                    <option value="">Pasaporte</option>
                </select>
                <label for="">Numéro:</label>
                <input type="text" name="" id="fClientNip">
                <label for="">Fecha Nacimiento:</label>
                <input type="datetime-local" name="" id="fClientBirthdate">
            </div>
            <button>Enviar</button>
        </form>

    <script src="script.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.