chrome浏览器中自带input样式input:-internal-autofill-selected(修改input背景色)
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 }