add scss mixin for styling input autofill colors

Author: mmalerba

src/cdk/input/_autofill.scss

@@ -1,7 +1,8 @@
+// Core styles that enable monitoring autofill state of inputs.
 @mixin cdk-input-autofill {
   // Keyframes that do nothing, but allow us to monitor when an input becomes autofilled.
-  @keyframes cdk-input-autofill-start {from {} to {}}
-  @keyframes cdk-input-autofill-end {from {} to {}}
+  @keyframes cdk-input-autofill-start {}
+  @keyframes cdk-input-autofill-end {}
 
   .cdk-input-autofill-monitored:-webkit-autofill {
     animation-name: cdk-input-autofill-start;
@@ -11,3 +12,27 @@
     animation-name: cdk-input-autofill-end;
   }
 }
+
+// Used to generate UIDs for keyframes used to change the input autofill styles.
+$cdk-input-autofill-color-frame-count: 0;
+
+// Mixin used to apply custom background and foreground colors to an autofilled input.
+// Based on:
+// https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete#answer-37432260
+@mixin cdk-input-autofill-color($background, $foreground:'') {
+  @keyframes cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count} {
+    to {
+      background: $background;
+      @if $foreground != '' { color: $foreground; }
+    }
+  }
+
+  &:-webkit-autofill,
+  &.cdk-input-autofill-monitored:-webkit-autofill {
+    animation-name: cdk-input-autofill-start,
+                    cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count};
+    animation-fill-mode: both;
+  }
+
+  $cdk-input-autofill-color-frame-count: $cdk-input-autofill-color-frame-count + 1 !global;
+}

src/demo-app/input/input-demo.html

@@ -528,12 +528,16 @@ <h3>&lt;textarea&gt; with ngModel</h3>
 </mat-card>
 
 <mat-card class="demo-card demo-basic">
-  <mat-toolbar color="primary">Autofill Monitor</mat-toolbar>
+  <mat-toolbar color="primary">Autofill</mat-toolbar>
   <mat-card-content>
     <form novalidate>
+      <mat-checkbox [(ngModel)]="customAutofillStyle" name="custom">
+        Use custom autofill style
+      </mat-checkbox>
       <mat-form-field>
-        <mat-label>Autofill monitor</mat-label>
-        <input matInput (cdkAutofill)="isAutofilled = $event.isAutofilled" name="autofill">
+        <mat-label>Autofill monitored</mat-label>
+        <input matInput (cdkAutofill)="isAutofilled = $event.isAutofilled" name="autofill"
+               [class.demo-custom-autofill-style]="customAutofillStyle">
       </mat-form-field>
       <button color="primary" mat-raised-button>Submit</button>
       <span> is autofilled? {{isAutofilled ? 'yes' : 'no'}}</span>

src/demo-app/input/input-demo.scss

@@ -1,3 +1,5 @@
+@import '../../../dist/packages/cdk/input/autofill';
+
 .demo-basic {
   padding: 0;
 }
@@ -23,3 +25,7 @@
   padding: 0;
   background: lightblue;
 }
+
+.demo-custom-autofill-style {
+  @include cdk-input-autofill-color(transparent, red);
+}

src/demo-app/input/input-demo.ts

@@ -52,6 +52,7 @@ export class InputDemo {
   delayedFormControl = new FormControl('');
   model = 'hello';
   isAutofilled = false;
+  customAutofillStyle = true;
 
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);