After successfuly disabling the autofill's yellowish background-color, I stumbled upon another feature.
Each of my input elements have a background image, and every time I focus on a text input, the browser suggests values I used before in a drop down list.
After I pick a value, the autofill covers my entire background and hides the image.
Here's my html and css (elaborated in JSfiddle):
<section class="formContainer">
<img class="sesameLogo" src="~/Content/Images/Site/sesamelogo.png" />
<form id="signUpForm" class="pageForm">
<input type="text" name="decoy" class="decoy"/>
<input type="password" name="decoy" class="decoy" />
<input type="text" placeholder="Full Name" name="FullName" id="fullName" />
<input type="text" placeholder="Email" name="email" id="email" />
<input type="password" placeholder="Password" name="password" id="password" />
<input type="password" placeholder="Confirm Password" name="confirmPassword" id="secPassword" />
<section id="actionBtnsCont">
<button id="btnSignUp" class="mainBtn" type="button">Sign Up</button>
<label class="genContextLbl">or</label>
<button id="btnSignIn" class="genBtn" type="button">Sign In</button>
</section>
</form>
</section>
https://jsfiddle.net/65wkgqs0/
What you need is:
move background image from <input>
element
HTML
<div class="email-wrapper">
<input type="text" placeholder="Email" name="email" id="email" />
</div>
CSS
.email-wrapper {
display: inline-block;
background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 9px;
}
and postpone changing of background-color when autofill
CSS
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}
Updated your fiddle: https://jsfiddle.net/65wkgqs0/6/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With