Question

我想使用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（）setter将自动处理属性名称的前缀。例如，在Chrome / Safari中将.css（“user-select”，“none”）设置为-webkit-user-select，Firefox将使用-moz-user-select，IE10将使用-ms-user -select。

所以我试过这个

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

但不要去哪里。

我哪里错了？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: