使用 jQuery css 更改自动填充产生的颜色

Posted 2023-03-06

【中文标题】使用 jQuery css 更改自动填充产生的颜色

【英文标题】：Using jQuery css to change color produced by autofill

【发布时间】：2016-05-29 17:29:36

【问题描述】：

我想用jQuery的css函数来改变我的邮箱输入框的颜色

<input type="email" name="email" value="" id="duplicate_email" />

只是改变颜色

jQuery('#duplicate_email').css('color', 'red', 'important');

不工作，因为自动填充优先

input:-webkit-autofill 
    -webkit-text-fill-color: black;

我已尝试关闭自动完成功能，但这在 chrome 中不再有效

<input type="email" name="email" value="" id="duplicate_email" autocomplete="off" />

我在 jQuery 文档中看到

从 jQuery 1.8 开始，.css() 设置器将自动处理属性名称的前缀。比如在Chrome/Safari中取.css("user-select", "none")会设置为-webkit-user-select，Firefox会使用-moz-user-select，IE10会使用-ms-user -选择。

所以我尝试了这个

jQuery('input["email"]:-webkit-autofill').css('text-fill-color', 'red !important');

但不去哪里。

我哪里错了？

【问题讨论】：

从未涉足过自动完成功能，但您可以尝试切换课程，看看是否会超越它

我会创建另一个类，并使用 jQuery 添加该类，而不是修改 css。它使它更清洁，更易于维护

我的经验是自动填充优先并覆盖我所做的任何事情。

【参考方案1】：

您是否尝试过使用 CSS 而不是 jQuery 来修改自动填充的 CSS？

#MyInput:-webkit-autofill 
  -webkit-text-fill-color: black;
  color: black;
  background-color: blue;  

<input type='text' placeholder='Autofill Me' id='MyInput' />

如果您想使用 jQuery 来定位要更改的元素，只需在 CSS 中使用特定类名执行此操作，然后将该特定类名分配给您的 jQuery 选择的元素。

$("#duplicate_email").addClass("Alternative-Autofill");

.Alternative-Autofill:-webkit-autofill 
  -webkit-text-fill-color: black;
  color: black;

【讨论】：

是的，这行得通。我正在使用.css 函数，因为我想在某些条件下更改电子邮件输入的颜色。

然后只需使用 jQuery 为满足特定条件的输入提供一个特殊的类名，然后像这样访问它。

我会试一试告诉你。

解决方案的后半部分对我有用。非常聪明的解决方案。谢谢。