CODEWITHSUNDEEP
css
cjwiseman11
cjwiseman11

Reputation: 74

Set disabled input background color after autofill

I'm creating a form where once it has been submitted, I want to remove the background colour of the input.

If I use Google Autofill on an input, the background color and color attributes are ignored.

In dev tools it's showing that my styles SHOULD be visible, but they're not.

input:disabled, textarea:disabled, .disabled {
  background: #060301;
  color: #f0eef3;
}

/* Annoyingly we have to override Chrome styles */
input:-webkit-autofill:disabled, 
textarea:-webkit-autofill:disabled,
input:-internal-autofill-selected {
  background: #060301!important;
  color: #f0eef3!important;
}

It works fine unless autofill was used.

Any ideas?

Upvotes: 2

Views: 2509

Answers (2)

fluidsonic
fluidsonic

Reputation: 4676

You can re-set the value of the input field right before disabling it. That will reset Chrome's autofill status.

inputField.value = inputField.value
inputField.disabled = true

The only way to achieve the desired effect - at least visually - with only CSS is to colorize the background using a large inset box shadow rather than setting the background color. The latter is locked by the user agent stylesheet.

Upvotes: 2

Saravana
Saravana

Reputation: 3506

Set a background color for all disabled input elements of type="text": You can add the disabled attribute in html and add background.

Reference

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}
<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

Upvotes: -1

Related Questions