Chorme浏览器自动填充背景色问题

场景:

当使用类型为 password 的输入框时,使用 chrome 自带的填充功能,会自动给 input 添加浅蓝色背景色。而在暗色主题背景下,会显得很突兀。在样式控制面版中,查阅相关资料,了解到input:-webkit-autofill,可以使用这个属性来解决。

Input 填充后会有一个默认的样式:

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: fieldtext !important;
}

这个样式是无法通过改变 background-color 来进行覆盖的,因此可以借助阴影来巧妙覆盖。

解决如下:

设置 box-shadow 阴影覆盖背景色。

input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #3e3f61 inset !important; // 改变背景色
      -webkit-text-fill-color: white; // 改变字体色
}
本文链接:
版权声明:自由转载-署名-非商业性使用 | CC BY-NC-SA 3.0 CN许可协议。
下一篇:js库-Filepond

评论 (4)

当前评论模式:游客模式,系统将自动生成相关数据信息。《内容规范》你的账号名为:
9brA4H

游客
·
4 个月前
62Q0o8

asd

游客
·
8 个月前
RfH6Kn

游客
·
1 年前
qTDMSz

@RfH6Kn:

游客
·
1 年前