1、實現思路1:如果不是想設置為透明色 可直接使用box-shadow
1 input:-webkit-autofill{ 2 -webkit-box-shadow:0 0 0 1000px white inset !important; 3 }
2、實現思路2:關閉自動填充功能 ( 也可實現 不推薦 )
<input type="text" autocomplete="off">
3、實現思路3:通過CSS3動畫解決(強推)
1 input:-webkit-autofill, 2 input:-webkit-autofill:hover, 3 input:-webkit-autofill:focus, 4 input:-webkit-autofill:active { 5 -webkit-transition-delay: 111111s; 6 -webkit-transition: color 11111s ease-out, background-color 111111s ease-out; 7 }
代碼示例:
1 .ivu-input{ 2 height: 50px; 3 color: #fff; 4 padding: 8px 12px 8px 48px; 5 font-size: 16px; 6 line-height: 34px; 7 border: none; 8 outline:none; 9 border-radius:8px; 10 background-color: transparent; 11 } 12 13 .ivu-input:-webkit-autofill, 14 .ivu-input:-webkit-autofill:hover, 15 .ivu-input:-webkit-autofill:focus, 16 .ivu-input:-webkit-autofill:active{ 17 -webkit-transition-delay: 99999s; 18 -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; 19 }