前端開發入門到實戰：css實現修改瀏覽器自動填充表單的預設樣式

當表單中存在input[password]的時候，採用submit方式提交。就會觸發瀏覽器自動填充表單。比如chrome自動填充後，淡黃色輸入框代替了背景樣式，看起來有些怪異。 那麼如何透過css實現取消瀏覽器自動填充表單的預設樣式呢？

解決方法一：

當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;
}</span>

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習扣qun：784783012
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有效資源還是很有必要的。

解決方法二：

input文字框是使用圖片背景的。css程式碼如下：

input:-webkit-autofill{/*填充樣式效果取消*/
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 99999s ease-in-out 0s;
    -webkit-transition-delay: 99999s;
}

使用css3動畫將其背景色變化的延遲時間儘可能的延長 。