Chrome表單文本框自動填充黃色背景色樣式

  開發後臺管理系統或 網站時，使用谷歌的Chrome瀏覽器訪問網頁中表單，文本框背景色自動填充爲黃色。這個問題在網絡上其實早已是老生常談了，今天正巧我要處理這個問 題，把以前查閱的一些資料和本身解決這個問題的方法紀錄在此，一是爲你們遇到此問題時提供一份資料，二是做爲本身的筆記。過多的話就很少說了，下面進入正 題。

        1、首先介紹一下我遇到這個問題時文本框的樣式狀況： 

上圖爲Chrome瀏覽器爲表單中的文本框自動填充黃色背景色的樣子，
我本身爲文本框加的，得到焦點後，周圍有藍色陰影。

 

<input class="txt" id="userName" name="userName" type="text" value="" style="" />

<style type="text/css">
.txt{ 
	width:130px; 
	height:22px; 
	line-height:20px; 
	padding-left:5px; 
	border:1px solid #aaaaaa; 
	outline:none; 
	margin:6px 0px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){ 
	// 文本框得到焦點後，邊框顏色改成藍色，添加藍色陰影 
	$('.txt').focus(function(){ 
		$(this).css('border', '1px solid #5789DC');
		$(this).css('box-shadow', '0px 0px 5px rgba(87, 137, 220, 0.5)'); 
	}); 
	// 文本框失去焦點後，邊框恢復灰色，去掉陰影 
	$('.txt').blur(function(){ 
		$(this).css('border', '1px solid #aaaaaa'); 
		$(this).css('box-shadow', '0px 0px 0px rgba(0, 0, 0, 0.5)'); });
	});
</script>

上面的代碼爲上圖所呈現的文本框樣子的代碼

        2、我找到過的資料

下面這篇文章是找到的一個被轉過許屢次的文章，對Chrome自動添加背景色的問題描述的還算比較透徹，
chrome表單自動填充後，input文本框的背景會變成偏黃色的，這是因爲chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，而後對其賦予如下樣式：

 

1. input:-webkit-autofill {
2. background-color: #FAFFBD;
3. background-image: none;
4. color: #000;
5. }

在有些狀況下，這個黃色的背景會影響到咱們界面的效果，尤爲是在咱們給input文本框使用圖片背景的時候，原來的圓角和邊框都被覆蓋了：

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

能夠對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景；如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. }

若是你有使用圓角等屬性，或者發現輸入框的長度高度不太對，能夠對其進行調整，除了chrome默認定義的background- color，background-image，color不能用!important提高其優先級之外，其餘的屬性都可使用!important提高其 優先級，如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. height: 27px!important;
5. line-height: 27px!important;
6. border-radius: 0 4px 4px 0;
7. }

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

這個比較麻煩，目前還沒找到完美的解決方法，有兩種選擇：

一、若是你的圖片背景不太複雜，只有一些簡單的內陰影，那我的以爲徹底可使用上面介紹的方法用足夠大的純色內陰影去覆蓋掉黃色背景，此時只不過是沒有了原來的內陰影效果罷了。

二、若是你實在想留住原來的內陰影效果，那就只能犧牲chrome自動填充表單的功能，使用js去實現，例如：

1. $(function() {
2. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
3. $(window).load(function(){
4. $('ul input:not(input[type=submit])').each(function(){
5. var outHtml = this.outerHTML;
6. $(this).append(outHtml);
7. });
8. });
9. }
10. });

遍歷的對象可能要根據你的需求去調整。若是你不想使用js，好吧，在form標籤上直接關閉了表單的自動填充功能：autocomplete=」off」。

關於網上盛傳的方法不奏效的一些測試

這個問題困擾了我挺長一段時間的，網上寫的方法主要有2種：第一種是在樣式裏對input:-webkit-autofill重寫background- color和color，使用!important提升其優先級。第二種是使用jquery，先判斷是不是chrome，若是是，則遍歷input:- webkit-autofill元素，再經過取值，附加，移除等操做來實現。

可是我測試發現，這兩種方法都不湊效！不知道是隨着chrome版本的升級，如今的chrome（27）已經不支持重寫input:-webkit- autofill原有的屬性，仍是怎麼回事。另外js也沒法獲取到chrome自動填充的表單的value值，因此網上盛傳的使用jquery解決的方法 也是不湊效，最多也就只能去掉黃色背景，而自動填充的value卻被移除了。chrome自動填充的表單的value值是存在 DocumentFragment裏的div中的，若是有哪位童鞋知道怎麼獲取chrome自動填充的表單的value值，還請指教一下。

=====================================================================================
==== 文章結束

        3、使用網上的幾種處理方法後的問題： 

方法一：

添加以下代碼：

 

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

問題爲：第一次打開頁面，文本框正常，爲白色背景，以下面左圖；可是點擊文本框後，背景再次被填充爲黃色了，以下面右圖；因此未達到效果。

方法二：

添加以下代碼：

 

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

與上一個對比，在樣式後面添加了「!important」，使用!important提升其優先級。
問題爲：第一次打開，文本框背景沒有被填充；點擊文本框，背景也沒有被填充；可是本身爲文本框添加的點擊得到焦點後添加陰影的效果沒有了。

審查元素後，看看原來如此，後加的陰影樣式覆蓋了本身寫的外邊框陰影；如此仍是沒有達到效果。

        4、目前我使用解決方案： 

在form標籤上直接關閉了表單的自動填充功能：autocomplete=」off」

 

<form action="loginAction" method="post" autocomplete="off">

 

第一次打開頁面文本框沒有填充黃色背景，點擊得到焦點後也沒有填充黃色背景，我本身添加的外邊框藍色陰影也還有。算是達到了預期效果。