Change Color of Background Input Field For Autofill Values

Question

I currently have a Rails 4 application running bootstrap-sass for Bootstrap 2. I use localhost for my testing. I have applications with a login screen. The input fields are white with a really thin gray border with blue text. When I type in the fields the background of the input fields are white with blue text. However when I go to the login screen where I have saved my login information the information fills up the fields but changes the background of both fields to yellow with the text black. One is text-field and the other is password-field.

I would like the information to fill in using the css I have defined in the view. Is there a way I can do this with CSS? I have not found anything with this specific issue.

Any help would be appreciated. I will continue searching.

UPDATE 3/28/2014 9:15 am CDT

I successfully implemented the solution from the link that was suggested by Martin to change the background color for autofill. I decided to guess and did a search on webkit font color text and found the solution to change the font color for autofill.

Here is my solution:

input:-webkit-autofill {
  -webkit-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
  -moz-text-fill-color: $textColor;
  -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
  -o-text-fill-color: $textColor;
  -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
  -khtml-text-fill-color: $textColor;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
}

sounds like Chrome autocomplete - you wnat to look into it - this might give you some ideas: http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete — Martin Turjak, Mar 28 '14 at 07:37
Martin, that worked. Please add it as an answer and I will check it. My background is white now. The text is black. I would like to find a way to change the color but for now that is not as important as changing the background color which fits my color scheme. — Pamela Cook - LightBe Corp, Mar 28 '14 at 14:13

score 4 · Answer 1 · answered May 19 '14 at 14:57

I had to extend your solution to address the input fields on :focus as well. This code currently works for my needs:

input:-webkit-autofill {
    -webkit-text-fill-color: $black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
    -moz-text-fill-color: $black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
    -o-text-fill-color: $black;
    -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
    -khtml-text-fill-color: $black;
    -khtml-box-shadow: 0 0 0px 1000px white inset;
}

input:focus:-webkit-autofill {
    -webkit-text-fill-color: $black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-moz-autofill {
    -moz-text-fill-color: $black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-o-autofill {
    -o-text-fill-color: $black;
    -o-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-khtml-autofill {
    -khtml-text-fill-color: $black;
    -khtml-box-shadow: 0 0 0px 1000px white inset;
}

Good answer but you can reduce the amount of code you need by using the same `{}` section for each browser support query. All you need to do is `input:-webkit-autofill, input:focus:-webkit-autofill {`. — Jake, Apr 04 '19 at 15:49

Change Color of Background Input Field For Autofill Values

1 Answers1