我有電子郵件輸入，上面有背景影像作為符號。問題是如果用戶添加資料，輸入可以正常作業，但如果他們選擇選擇瀏覽器提供的建議，影像就會隱藏。
請參閱下面的 HTML 和 CSS。
.login-form-email {
border-radius: 6px;
background-color: #fff;
background: url(img/envelop.png) no-repeat scroll 7px 7px;
padding-left: 40px;
} <div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>這個片段可能不起作用，但我會添加它的外觀快照。
這是有關其最初外觀的影像 1。 
現在，當我選擇自動建議時，它看起來很奇怪。（請參閱已洗掉信封符號。）
uj5u.com熱心網友回復：
這是因為當您選擇建議值時，它將自動填充該欄位，并且瀏覽器具有默認的自動填充background屬性。
您已經使用了 sort-hand 屬性，background因此當您自動填充欄位值時，該background屬性將更改。
請像這樣使用分離的屬性。
.login-form-email {
border-radius: 6px;
background-color: #fff;
background-image: url(img/envelop.png);
background-repeat: no-repeat;
background-position: 7px 7px;
padding-left: 40px;
}
uj5u.com熱心網友回復：
如果你想改變自動填充輸入的背景顏色，你需要使用這些：
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;
}
uj5u.com熱心網友回復：
問題是目前無法覆寫瀏覽器的默認樣式，或者沒有直接的解決方案，請參閱此處： 如何避免應用“-internal-autofill-selected”樣式？
另一種解決方案是使用一個before元素，如下所示：
.form-group:before {
content: "";
background: url(https://emojipedia-us.s3.amazonaws.com/source/skype/289/envelope_2709-fe0f.png) no-repeat scroll 0px 0px;
padding-left: 20px;
background-size: 20px 20px;
z-index: 999;
position: relative;
left: 65px;
}
.login-form-email{
text-indent: 30px;
}<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377892.html