input 輸入框 在自動填充時，背景顏色問題

問題:

自動填充前：

 自動填充后：

 

 

 

 

可以看出，自動填充后，input背景顏色變成了白色,
解決辦法：

1. 純色陰影覆蓋底色

2. input:-webkit-autofill {
       box-shadow: 0 0 0 1000px #333333 inset;
       -webkit-text-fill-color: #fff;
   }

   再看看，自動填充后的效果:

 

 

 

 注意： 這個方法有個問題，就是input 輸入框，不能有 圓角(border-radius)，而且只適用於純色背景框。

 

 

 可以看到，兩邊有明顯的白色

2.設置透明：

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c;
    transition: background-color 5000s ease-out 0.5s;
}

效果：

 

 

 

3.利用動畫延遲

 

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

效果：

 

 推薦使用第二種或第三種.

轉載：https://blog.csdn.net/qq_43036532/article/details/938610