首页/ 填坑/ 文章详情

覆盖 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 标签查看StyleCSS样式,Chrome 版本不同,略有差别。

解决方法

CSSinpupt  { 
    box-shadow: inset 0 0 0 1000px #f5f5f5!important;
}

将阴影的颜色值设置为同底的背景色,如:#f5f5f5;

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!