Search code examples
cssbootstrap-4sass

Bootstrap form input control not changing background and border color

I'm changing the colors of the input control by doing:

//Override bootstrap variables
$input-bg: $background-color;
$input-color: yellow;
$input-border-color: $gray-500;
$input-focus-border-color: $primary;
$input-placeholder-color: $gray-600;

//Set background
.form-control
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg;
}

But as you can see in the image below, when the form is display with pre-filled controls, the background is a different color. Also, when I start typing in the input control, the text color is gray, but when I leave the control it's yellow.

What am I missing when setting the background and text colors?

Input control

Solution

  • To change the chrome autocomplete input background

    /* Change the white to any color */
       input:-webkit-autofill,
       input:-webkit-autofill:hover, 
       input:-webkit-autofill:focus, 
       input:-webkit-autofill:active{
          -webkit-box-shadow: 0 0 0 30px white inset !important;
       }

    And for typing in the same font color, you should use :active and :focus with the concerned input field.