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

Answer 1

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