首页/ 填坑/ 文章详情

覆盖 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

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...