当我们在填写用户名或者电话之类的input框的时候,总会有以前提交过的一些历史记录让我们填充使用,但是当我们点击了历史记录自动填充到文本框的时候发现原来的文本框的背景颜色改变了,而且出现和界面不搭的问题。
通过编辑器检查发现如下代码改变了我们input的css:
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: -internal-light-dark(black, white) !important;
}
下面提供两种思路改变:
- 在input中添加autocomplete=“off”,意思就是关闭历史记录或者自动填充
- 通过css给input设置样式改变原来的样式
input[type='text']:-webkit-autofill {
-webkit-text-fill-color: #9199aa;
box-shadow: 0 0 0px 50px #2b2b36 inset !important;
}
其中 -webkit-text-fill-color改变填充的文字的颜色,box-shodow改变背景颜色填充,亲测有效!