上一篇
部署线上常见问题一：MySQL字段存储中文显示乱码
覆盖 Chrome input 自动填充样式：internal-autofill-selected
HTML 的 input 标签做为人机交互的窗口，其样式简陋，早已不适合如今的审美。为了让 input 标签与时俱进，我们需要对其重构样式，一改以往风格。
重构 input 样式
CSSinpupt {
width: 100%
height: 34px;
line-height: 29px;
padding: 0;
margin: 0;
border-width: 0
background: transparent; //背景透明
-webkit-tap-highlight-color: transparent;
}
HTML <div><input type="text" name="acount" placeholder="请输入账号"></div>
到了这步，基本完成了 input 样式重构，表面上看不出一点毛病。然用户登陆密码后，Chrome 会询问用户是否记住密码。用户选择了是，下次登陆可以直接使用缓存的密码，非常人性化的操作。
用户下次登陆，直接使用缓存的密码，这回 Chrome 作妖来了：自动添加新的样式，破坏 input 样式原本的风格，怎么看怎么别扭，特别难看。
Chrome 自动填充添加的样式
CSSinput:-internal-autofill-selected {
appearance: menulist-button;
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
}
input 自动填充后，直接F12, 点击 input 标签查看Style的CSS样式，Chrome 版本不同，略有差别。
解决方法
CSSinpupt {
box-shadow: inset 0 0 0 1000px #f5f5f5!important;
}
将阴影的颜色值设置为同底的背景色,如：#f5f5f5;
相关文章Related Articles
文章评论0 records
最新
最早
最新评论Latest comments