浏览器表单默认填充样式修改

最新推荐文章于 2021-06-17 01:42:55 发布

苍海一声呵呵呵

最新推荐文章于 2021-06-17 01:42:55 发布

阅读量329

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/qq_38910842/article/details/103051033

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浏览器表单默认填充样式修改

表单默认样式 在这里插入图片描述
Chrome 会自动为 input 增加如下样式：
这个样式的优先级也比较高. 无法通过 important 覆盖

background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;

在这里插入图片描述

解决方法：

通过纯色的阴影覆盖底色

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}