Chorme浏览器自动填充背景色问题
1843
4
场景:
当使用类型为 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许可协议。