chrom下修改input输入框默认背景色

chrom浏览器的表单自动填充功能Autofill 使用时,填充表单输入框将变成一个奇怪的默认黄色背景色,有重大影响的整体外观网页,很繁琐的处理。

分析：

发生这种情况的原因是因为 chrom会自动为 input 添加以下类型:

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

和这种风格不能覆盖,加上 important 我们也不能,所以我们必须想其他方法。

解决方法

1.使用 box-shadow 覆盖

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset; // 将背景设置为白色
    -webkit-text-fill-color: #fff; // 字体颜色
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset; // 获得焦点时将背景设置为白色
    -webkit-text-fill-color: #fff; // 字体颜色
}

这个变化的背景白色。

然而,这种方法的缺点是,背景只能改为纯色,不透明。 2。

2.使用 animation 动画

input:-webkit-autofill {
    -webkit-animation: autofill-fix 1s infinite;
    -webkit-text-fill-color: #fff;
}
@-webkit-keyframes autofill-fix {
    from {
        background-color: transparent
    }
    to {
        background-color: transparent
    }
}

这意味着颜色总是会 transparent 到 transparent 执行一个循环动画。

上述两种方法可以解决绝大多数问题。

3. 关闭 autocomplete 功能