1.問題
chrome表單自動填充後,input文本框的背景會變成偏黃色的。
2.原因
因爲chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性造成的,然後對其賦予以下樣式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
3.解決方法:情景一:input文本框是純色背景的
可以對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景,如:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
補充:如果你有使用圓角等屬性,或者發現輸入框的長度高度不太對,可以對其進行調整,除了chrome默認定義的background-color,background-image,color不能用!important提升其優先級以外,其他的屬性均可使用!important提升其優先級,如: input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}
情景二:input文本框是使用圖片背景的 這個比較麻煩,目前還沒找到完美的解決方法,有兩種選擇:
(1)如果你的圖片背景不太複雜,只有一些簡單的內陰影,那個人覺得完全可以使用上面介紹的方法用足夠大的純色內陰影去覆蓋掉黃色背景,此時只不過是沒有了原來的內陰影效果罷了。
(2)如果你實在想留住原來的內陰影效果,那就只能犧牲chrome自動填充表單的功能,使用js去實現,例如:
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});
遍歷的對象可能要根據你的需求去調整。如果你不想使用js,好吧,在form標籤上直接關閉了表單的自動填充功能:autocomplete=”off”。 4.參照:http://www.jb51.net/css/99317.html
二、chrome內核瀏覽器獲取焦點後導致input textarea出現邊框的問題解決:
1.問題:
在表單項中的控件聚焦時總會出現一個黃色邊框特別是input[text]和textarea,並且在textarea右下角還有一個可用鼠標拖動該表textarea大小的功能。
2.解決方法:
CSS清除掉chrome瀏覽器的默認效果:
(1)取消表單項聚焦時產生的黃色邊框:
input,button,select,textarea{outline:none}
(2)取消textarea的拖動改變大小的功能:textarea{resize:none}