css實現修改瀏覽器自動填充表單的默認樣式

這篇文章主要講解了“css實現修改瀏覽器自動填充表單的默認樣式”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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>

為了幫助大家讓學習變得輕松、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這里給大家推薦一個前端全棧學習交流圈：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動畫將其背景色變化的延遲時間盡可能的延長 。

感謝各位的閱讀，以上就是“css實現修改瀏覽器自動填充表單的默認樣式”的內容了，經過本文的學習后，相信大家對css實現修改瀏覽器自動填充表單的默認樣式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！