如何避免 Chrome 在自动填充输入上隐藏背景图像和颜色？

Question

Chrome Browser auto-fill removed effect of background-color and background-image from Username and Password input fields.

Before autocomplete

After autocomplete

But Chrome Browser autocomplete hide my icons from inputs and also changed my background-color . So i need my icons stay on inputs as it is.

It is possible to stop Chrome Browser from change background color of fields and hide images?

 .form-section.form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; }.form-section.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }.form-section.form-group { margin-bottom: 21px; }.form-section.form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); }.form-section.form-control[type="password"] { background-image: url('https://i.stack.imgur.com/910l0.png'); }.form-btn { padding:10px; background-color: #65a3fe; border: none; color: #ffffff; font-size: 18px; font-weight: 700; }

 <div class="form-section"> <form> <div class="form-group"> <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value=""> </div> <div class="form-group"> <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password"> </div> <button type="submit" class="btn btn-primary form-btn">Log in</button> </form> </div>

Answer 1

Here you can use any color eg white , #DDD , rgba(102, 163, 177, 0.45) .

For Background: transparent won't work here so please use colors.

 /* Change the white to any color;) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset;important }

for text color:

 /*Change text in autofill textbox*/ input:-webkit-autofill { -webkit-text-fill-color: yellow;important }

Your Solution: (for above case)

Use separate div for icon and for input

 .form-section.form-control { font-size: 16px; width: 100%; margin-left: 9px; }.form-section.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }.form-section.form-group { margin-bottom: 21px; }.icon-email { background-image: url('https://i.stack.imgur.com/xhx3w.png'); background-repeat: no-repeat; background-position: center center; width: 30px; height: auto; }.icon-pass { background-image: url('https://i.stack.imgur.com/910l0.png'); background-repeat: no-repeat; background-position: center center; width: 30px; height: auto; }.form-btn { padding:10px; background-color: #65a3fe; border: none; color: #ffffff; font-size: 18px; font-weight: 700; }.input-txt{ padding-left: 5px; float:left; border-left:none; outline:none; border: none; background-color: #f7f8fa; }.custom-input { display: flex; border-radius: 4px; background-color: #f7f8fa;important: border; none: height; 51px: } input,-webkit-autofill: input:-webkit-autofill,hover: input:-webkit-autofill,focus: input:-webkit-autofill:active { -webkit-box-shadow; 0 0 0 30px #f7f8fa inset important }

 <div class="form-section"> <form> <div class="form-group custom-input"> <div class='icon-email'></div> <input title="Email" type="email" class="form-control input-txt" name="email" placeholder="Your email address" value=""> </div> <div class="form-group custom-input"> <div class='icon-pass'></div> <input title="Password" type="password" class="form-control input-txt" name="password" placeholder="Your Password"> </div> <button type="submit" class="btn btn-primary form-btn">Log in</button> </form> </div>

Answer 2

You CAN NOT Override the autocomplete code, since it's being controlled by user agent stylesheet , take a look at cascading-order to know more.

Here is the code ( i've copied from google chrome ) that is making your icons disappear on autocomplete, just in case you were wondering :

 input:-internal-autofill-selected { background-color: rgb(232, 240, 254);important: background-image; none:important, color; -internal-light-dark-color(black white) important }

So what now? If you are intent on solving icons disappearing problem here is a hack that you can do it for you:

 .form-section.form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; }.form-section.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }.form-section.form-group { margin-bottom: 21px; position: relative; }.form-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }.form-section.form-control[type="password"] { background-image: url('https://i.stack.imgur.com/910l0.png'); }.form-btn { padding: 10px; background-color: #65a3fe; border: none; color: #ffffff; font-size: 18px; font-weight: 700; }

 <div class="form-section"> <form> <div class="form-group"> <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value=""> <img class="form-icon" src="https://i.stack.imgur.com/xhx3w.png" alt=""> </div> <div class="form-group"> <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password"> </div> <button type="submit" class="btn btn-primary form-btn">Log in</button> </form> </div>

Answer 3

Please check if this works for you. I made some changes on your code.

You can check in this jsfiddle

 <div class="form-section"> <form> <div class="form-group control"> <input title="Email" type="email" class="form-control email" name="email" placeholder="Your email address" value=""> <span class='input-icon'></span> </div> <div class="form-group control"> <input title="Password" type="password" class="form-control pass" name="password" placeholder="Your Password"> <span class='input-icon'></span> </div> <button type="submit" class="btn btn-primary form-btn">Log in</button> </form> </div>.form-section.form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; }.form-section.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }.form-section.form-group { margin-bottom: 21px; }.form-btn { padding:10px; background-color: #65a3fe; border: none; color: #ffffff; font-size: 18px; font-weight: 700; }.control { position: relative; }.email.pass { padding-left: 35px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; }.email ~.input-icon { background-image: url('https://i.stack.imgur.com/xhx3w.png'); background-repeat: no-repeat; background-size: 100%; background-position: center center; width: 22px; height: 14px; position: absolute; left: 8px; bottom: 0; top: 0; margin: auto; padding-top: 5px; padding-bottom: 5px; }.pass ~.input-icon { background-image: url('https://i.stack.imgur.com/910l0.png'); background-repeat: no-repeat; background-size: 100%; background-position: center center; width: 22px; height: 14px; position: absolute; left: 8px; bottom: 0; top: 0; margin: auto; padding-top: 5px; padding-bottom: 5px; }

Answer 4

 /* Change the white to any color;) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset;important, } /*Additionally: you can use this to change the text color:*/ /*Change text in autofill textbox*/ input:-webkit-autofill { -webkit-text-fill-color; yellow important }

Credit to @Fareed Alnamrouti from Removing input background colour for Chrome autocomplete?

Answer 5

Let's try this code, hope this will helpful to you

 .form-section.form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; }.form-section.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }.form-section.form-group { margin-bottom: 21px; }.form-section.form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); } @-webkit-keyframes autofill_email { to { background-image: url('https://i.stack.imgur.com/xhx3w.png'); } }.form-section.form-control[type="email"]:-webkit-autofill { -webkit-animation-name: autofill_email; -webkit-animation-fill-mode: both; }.form-section.form-control[type="password"] { background-image: url('https://i.stack.imgur.com/910l0.png'); } @-webkit-keyframes autofill_pass { to { background-image: url('https://i.stack.imgur.com/910l0.png'); } }.form-section.form-control[type="password"]:-webkit-autofill { -webkit-animation-name: autofill_pass; -webkit-animation-fill-mode: both; }.form-btn { padding: 10px; background-color: #65a3fe; border: none; color: #ffffff; font-size: 18px; font-weight: 700; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="py-4"> <div class="container"> <div class="form-section"> <form> <div class="form-group"> <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value=""> </div> <div class="form-group"> <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password"> </div> <button type="submit" class="btn btn-primary form-btn">Log in</button> </form> </div> </div> </section>

If you want remove background color, then add default background-color in keyframe style