Question

我遇到了一个非常大的问题，我无法在登录页面和注册页面中更改Shopify网站中的电子邮件和密码输入元素背景颜色。

我刚刚意识到这个问题只出现在chrome中。

Answer 1

尝试将它放在你的CSS中，它应该覆盖当前的样式......

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: #ff9900;
}

<强>然而

如果它的自动完成只发生在chrome中，那么this应该修复它：

您可以使用任何颜色，例如白色，＃DDD，rgba（102,163,177,0.45）。

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

此外，您可以使用它来更改文本颜色：

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Answer 2

来自MDN：

特异性是浏览器决定哪个CSS属性的方法值与元素最相关，因此也是如此应用

浏览器根据应用于同一元素的选择器类型确定权重，应用权重较大的选择器，因此在您的情况下，选择器#customer_login input[type="email"]的权重大于内联样式，因此在您的规则中添加!important可以解决问题（取自same topic）：

当在样式声明上使用重要规则时，这个声明覆盖任何其他声明

TL; DR这就是诀窍：

background-color: red !important;

无法更改电子邮件和密码输入元素背景颜色Shopify

2 个答案: