CODEWITHSUNDEEP
jqueryhtmlcss
Matt Cremeens
Matt Cremeens

Reputation: 5151

Using jQuery css to change color produced by autofill

I want to use jQuery's css function to change the color of my email input box

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

Just changing the color as in

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

does not work as the autofill takes precedence

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

I have tried to turn the autocomplete off, but this no longer works in chrome

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

I saw in the jQuery documentation

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

so I tried this

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

but go no where.

Where am I going wrong?

Upvotes: 0

Views: 390

Answers (1)

Dustin Poissant
Dustin Poissant

Reputation: 3418

Have you tried modifying the CSS of the autofill using CSS instead of jQuery?

#MyInput:-webkit-autofill {
  -webkit-text-fill-color: black;
  color: black;
  background-color: blue;  
}
<input type='text' placeholder='Autofill Me' id='MyInput' />

If you want to use jQuery to target the elements to change just do this in the CSS with a specific class name and then assign that specific class name to the elements your jQuery selects.

$("#duplicate_email").addClass("Alternative-Autofill");
.Alternative-Autofill:-webkit-autofill {
  -webkit-text-fill-color: black;
  color: black;
}

Upvotes: 2

Related Questions