Change the color of the background input field for autocomplete values

Question

I currently have a Rails 4 application using bootstrap-sass for Bootstrap 2. I am using localhost for my testing. I have apps with a login screen. The input fields are white with a very thin gray frame with blue text. When I enter into the fields, the background of the input fields is white with blue text. However, when I go to the login screen, where I saved my registration information, the information fills in the fields, but changes the background of both fields to yellow with black text. One is a text field and the other is a password field.

I would like the information to be populated using css, which I defined in the view. Is there a way to do this using CSS? I did not find anything with this particular problem.

Any help would be greatly appreciated. I will continue the search.

UPDATE 3/28/2014 9:15 AM CDT

I successfully implemented the solution using the link suggested by Martin to change the background color for autocomplete. I decided to guess and did a search by the color of the webkit font text and found a solution to change the font color for autocomplete.

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;
}

Answer 1

I had to expand your solution to set input fields: focus. This code is currently working 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;
}