css--處理輸入框后顏色問題

1. input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  

2.     -webkit-text-fill-color: #ededed !important;  

3.     -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  

4.     background-color:transparent;  

5.     background-image: none;  

6.      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效時長  過渡效果  啟用時延遲的時間  

7. }  

8. input {  

9.      background-color:transparent;  

10. } 

這樣點擊輸入框的時候就不會觸發(fā)邊框顏色了

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

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使用足夠大的純色內(nèi)陰影來覆蓋input輸入框的×××背景；如：

1. input:-webkit-autofill {

2. -webkit-box-shadow: 0 0 0px 1000px white inset;

3. border: 1px solid #CCC!important;

4. }

如果你有使用圓角等屬性，或者發(fā)現(xiàn)輸入框的長度高度不太對，可以對其進行調(diào)整，除了chrome默認定義的background- color，background-image，color不能用!important提升其優(yōu)先級以外，其他的屬性均可使用!important提升其 優(yōu)先級，如：

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文本框是使用圖片背景的

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

1、如果你的圖片背景不太復雜，只有一些簡單的內(nèi)陰影，那個人覺得完全可以使用上面介紹的方法用足夠大的純色內(nèi)陰影去覆蓋掉×××背景，此時只不過是沒有了原來的內(nèi)陰影效果罷了。

2、如果你實在想留住原來的內(nèi)陰影效果，那就只能犧牲chrome自動填充表單的功能，使用js去實現(xiàn)，例如：

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

遍歷的對象可能要根據(jù)你的需求去調(diào)整。如果你不想使用js，好吧，在form標簽上直接關閉了表單的自動填充功能：autocomplete=”off”。

        三、使用網(wǎng)上的幾種處理方法后的問題： 

方法一：

添加如下代碼：

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提高其優(yōu)先級。
問題為：第一次打開，文本框背景沒有被填充；點擊文本框，背景也沒有被填充；但是自己為文本框添加的點擊獲得焦點后添加陰影的效果沒有了。

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

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

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

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

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