問題描述

chrome表單自動填充后autocomplete="on"，input文本框背景色變為黃色，因為chrome會默認給自動填充的input表單加上input:-webkit-autofill私有樣式，下面是樣式代碼：

input:-webkit-autofill { 
    background-color: #FAFFBD;
    background-image: none; 
    color: #000; } ```
下面是問題圖片：

![chrome瀏覽器](http://upload-images.jianshu.io/upload_images/740787-930cf18ddc664112.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####問題解決
由于加上的chrome加上的私有樣式是不能覆蓋的（改變background-color是不會有效果的），所以只有曲線救國。
這里我使用的是（不能解決文本框的背景是圖片的情況）：

input:-webkit-autofill{
box-shadow:0 0 0 120px #fff inset;//120這個值取至文本框寬度的1/2
}

使用后效果圖：
![chrome瀏覽器](http://upload-images.jianshu.io/upload_images/740787-4936c182b0f213c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**另外這里附上網上看見的另一種方法，用js（這種方法一定程度上可以解決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); }); }); } 10.});