Chrome浏览器的自动填充功能可隐藏文本输入的背景图片 [英] Chrome's autofill hiding text input's background image

问题描述

成功禁用自动填充的淡黄色背景色后，我偶然发现了另一个功能.

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.

这是我的html和css(在JSfiddle中详细说明):

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/

推荐答案

您需要的是:

从< input> 元素

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

更新了您的提琴: https://jsfiddle.net/65wkgqs0/6/

这篇关于Chrome浏览器的自动填充功能可隐藏文本输入的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！