1. 网上说的通过设置内阴影的方法要慎用, 如果 input 背景是黑色, 则会造成文字显示异常.
2. 下面这种方法经测试, 在各个浏览器表现良好, 原理是通过 transition 颜色变换, 此方法会引起光标颜色异常. 可以使用 caret-color 是新出的属性来设置光标颜色, 如果要兼容 ie678, 注意兼容性.
先在 input 对应的 CSS 中设置:
- -webkit-text-fill-color: #ffffff;
- caret-color: #fff; / 光标颜色 /
然后添加伪类:
- input: focus {
- outline: none;
- }
- input: -webkit - autofill { - webkit - text - fill - color: #ffffff;
- transition: background - color 5000s ease - in-out 0s;
- }
来源: http://www.qdfuns.com/article/23274/6775db01bf6a14880ffd9618958e61fa.html