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")
miForm.addEventListener("change",e=>{
setTimeout(()=>{
let name = e.target.value
e.target.value = ""
e.target.value = name
},10)
})
*{
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>