關於input:-webkit-autofill樣式問題


  最近在整理項目的時候,遇到了一個chrome瀏覽器自動填充的樣式問題,

用戶名跟密碼的input都設置為透明顏色,但是會變成黃色,打開chrome調試工具,發現有個input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;這個樣式,網上查詢得三種方案,一種是把input自動輸入關閉autocomplete="off",第二種是設置box-shadow陰影覆蓋默認樣式,

input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px white inset;
     -webkit-text-fill-color: #333;
}

  但是這種只適用於純色背景

  第三種是通過延長增加自動填充背景色的方式, 是用戶感受不到樣式的變化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
     -webkit-transition-delay: 99999s;
     -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

  

  由於我這里輸入框是背景為透明,選擇第二種並沒有效果,所以選擇第三種。

  總結:網上的方法很多,但要找到適合自己的解決方案。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM