Commit b99f5bda authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3256665 by pivica: Browsers are changing input bg color on autofill

parent e4db2259

themes/bs_bootstrap/sass/components/partials/_forms.scss

+4 −0
Original line number Diff line number Diff line
@@ -81,6 +81,10 @@ label { 
  }



  &-control {

    @if $input-autofill-bg {

      @include bs-input-autofill-fix($input-autofill-bg, $input-color);

    }



    // Usually we do not like 100% for all form controls but this is fine for

    // small screens.

    @include media-breakpoint-up('sm') {

themes/bs_bootstrap/sass/mixin/_util.scss

+32 −0
Original line number Diff line number Diff line
@@ -139,6 +139,38 @@ 
  }

}



// Helper function that returns autofill box shadow value.

@function bs-input-autofill-box-shadow($color) {

  @return  inset 0 0 0 1000px $color;

}



// Set input background color and text color for autofill state.

@mixin bs-input-autofill-fix($bg, $color: null) {

  // Many web browsers use !important for :autofill elements for

  // background-color which means we can not override this. This is the reason

  // we will use box-shadow to override element bg color.

  // @sse https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

  // Inspiration for bg color reset with a shadow taken from

  // https://stackoverflow.com/a/33688072.

  &:-webkit-autofill {

    // Override Chrome important background color hack with a shadow.

    box-shadow: bs-input-autofill-box-shadow($bg);

    // Override Chrome important text color hack.

    @if $color {

      -webkit-text-fill-color: $color;

    }



    // When element is in focus we need to maintain outer box shadow focus

    // style.

    &:focus {

      box-shadow: bs-input-autofill-box-shadow($bg), $input-focus-box-shadow;

      @if $color {

        -webkit-text-fill-color: $color;

      }

    }

  }

}



// Responsive break maximum width.

@mixin media-responsive-breakpoint-down($break: $responsive-break) {

  // If breakpoint is the largest one we will just print the rules without @media

themes/bs_bootstrap/sass/variables/_bs_bootstrap.scss

+3 −0
Original line number Diff line number Diff line
@@ -60,6 +60,9 @@ $input-height-border: $input-border-width * 2 !default; 
$input-line-height:         $input-btn-line-height !default;

$input-padding-x:           $input-btn-padding-x !default;

$input-padding-y:           $input-btn-padding-y !default;

// Control input autofill background color. Set it to false to disable

// overriding of default browser behavior.

$input-autofill-bg:         $input-bg !default;



$form-text-margin-top:      .1rem !default;

$form-inline-group-gutter:  2*$spacer !default;