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

Posted 2023-02-22

【中文标题】无法更改电子邮件和密码输入元素背景颜色 Shopify [重复]

【英文标题】：Can't able to change Email and Password input element background color Shopify [duplicate]

【发布时间】：2018-04-22 19:11:55

【问题描述】：

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

我刚刚意识到问题仅存在于 chrome 中。

【问题讨论】：

到目前为止你尝试过什么？我可以通过使用带有 !important 的内联规则来做到这一点

@arielnmz 我在内联规则中尝试了这个background-color: #000 !important;，但它不会更改电子邮件和密码，否则它可以工作

@arielnmz 在 chrome 中查看

我知道是什么问题，请删除您的答案，以便我可以删除这个愚蠢的问题。 :(

【参考方案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;

【讨论】：

我做到了，刷新看看发生了什么。

@RajnishCoder 是的，你必须将 background-color: # 更改为你想要的颜色 - 你可以从这里得到一个 google.com/… :)

我知道，但问题只在于 chrome

@RajnishCoder 显示黄色是因为它自动完成吗？

是的，非常感谢，我也明白了，但这是真正的问题***.com/questions/2781549/… 所以帮我删除这个问题

【参考方案2】：

来自MDN：

特异性是浏览器决定哪个 CSS 属性的方法 值与元素最相关，因此将是 已申请

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

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

TL;DR 这可以解决问题：

background-color: red !important;