input:-webkit-autofill 致使chrome的輸入框背景顏色變成黃色

填寫form表單時發現chrome的一個好坑啊！

當你以前有填寫過表單，獲取焦點時，input會有一個記錄以前填寫過的文本的下拉列表式的東東，就像這樣：（抱歉醜了點，隱私問題打上了馬賽克）

按理說，這沒什麼問題，不少時候爲了方便，也須要它記錄輸入，可是，同時也發現，文本框變成了屎黃色了！並且當你選擇其中的文本時它依然仍是屎黃色！

真是臥槽了...... 這徹底不是我想要的效果啊，誰願意面對着一坨坨屎黃的東西啊！爲何會這樣？爲何呢？我也不知道，其餘瀏覽器不會呀~ 一貫以良好形象示人的chrome怎麼就變成這樣了呢？

好吧，只能到百度裏谷歌一下了！還真不是隻有我一我的遇到這樣的問題的！

原來是由於：

看看，不只input, textarea、select也同樣有，並且只有是「-webkit」啊！看到這個你必定會想到設置background-color來覆蓋它，因而開始巧代碼......折騰幾秒鐘以後，信心滿滿的刷新，你會發現...這並無什麼卵用啊啊啊~

先無論它他爲何要這樣，大公司的要這麼幹，你不服能去揍他嗎？！來看看解決辦法！

方法一：

由於這玩意出現只有在以前有輸入記錄的狀況下才會出現的，因此只有禁用input的記錄就能ok！好比：<input type="text"  autocomplete="off">，如此當你點擊了input時它就不會有那一列表了！整個世界也就乾淨了！固然，若是你能忍受那屎黃色，也能夠把它給「on」了，或者不設置，由於autocomplet默認就是'on'的！

不過，不少時候可能需求不容許你去掉簡單方便的記錄！那可咋整？

因而，

方法二：

-webkit-box-shadow: 0 0 0px 1000px white inset  沒錯，就是給input設置內置陰影！並且必定要大，至少要比你的input自己大！不過，box-shadow是很慢的！並且，若是你的input是用圖片作背景的話，是沒有辦法作這麼幹的！因此在實際開發中，究竟是怎麼選擇，那還得本身權衡！

固然若是哪位同窗有更好的辦法，也但願予以指點！