當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Chrome 自动填充的表单是淡黄色的背景怎么办！

發(fā)布時(shí)間：2023/12/19 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 Chrome 自动填充的表单是淡黄色的背景怎么办！小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

chrome瀏覽器自動(dòng)填充表單的黃色背景高亮（#FAFFBD）一直困擾著我，我之前沒想著理它，可是最近一個(gè)登陸框，需要用到圖標(biāo)，于是我草率的直接設(shè)置在input元素里面，結(jié)果問題就來了，很難看很難看，因此還是總結(jié)一下。

這個(gè)問題，在2008年的時(shí)候就已經(jīng)存在了，隔了好幾年了，在chromium上面可以找到?Issue 46543，但是官方好像沒有理這個(gè)問題，英文沒怎么看懂，誰理解的，可以給大家分享一下。

思路一：打補(bǔ)丁

Webkit內(nèi)核的瀏覽器有一個(gè)-webkit-autofill私有屬性，

通過審查元素可以看到這是由于chrome會(huì)默認(rèn)給自動(dòng)填充的input表單加上input:-webkit-autofill私有屬性，然后對其賦予以下樣式：

1
2
3
4
5

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(102, 153, 204);">rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}

因此我們就會(huì)想到覆蓋這個(gè)樣式，代碼如下，但是依然不能覆蓋原有的背景、字體顏色。需要注意的是：加?!important?依然不能覆蓋原有的背景、字體顏色，除了chrome默認(rèn)定義的background-color，background-image，color不能用?!important?提升其優(yōu)先級以外，其他的屬性均可使用!important提升其優(yōu)先級。

1
2
3
4
5
6
7
8
9
10
11
12

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">#FFFFFF;
background-image: none;
color: #333;
/* -webkit-text-fill-color: red; //這個(gè)私有屬性是有效的 */
}
input:-webkit-autofill:hover {
/* style code */
}
input:-webkit-autofill:focus {
/* style code */
}

情景一：input文本框是純色背景的

解決辦法：

1
2
3
4

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}

情景二：input文本框是使用圖片背景的

解決辦法：

1
2
3
4
5
6
7
8
9
10
11
12
13

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function () {
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0) {
window.clearInterval(_interval); // 停止輪詢
autofills.each(function() {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}

下面的js不是太靠譜

1
2
3
4
5
6
7
8

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
});
}

思路二：關(guān)閉瀏覽器自帶填充表單功能

設(shè)置表單屬性?autocomplete="off/on"?關(guān)閉自動(dòng)填充表單，自己實(shí)現(xiàn)記住密碼

1
2
3
4

<form autocomplete="off" method=".." action="..">

<input type="text" name="textboxname" autocomplete="off">

網(wǎng)上大部分文章是使用Cookie實(shí)現(xiàn)記住用戶名、密碼。不管是在前端，還是后端都可以實(shí)現(xiàn)。本文不對Cookie存儲(chǔ)展開討論。可自行谷歌

原文：http://zcoder.cn/2015/01/14/front-end/chrome-autofill/

轉(zhuǎn)載于:https://www.cnblogs.com/lichuntian/p/4507800.html

總結(jié)

以上是生活随笔為你收集整理的Chrome 自动填充的表单是淡黄色的背景怎么办！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。