diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss index 6c3be808cdf..9576bfa0e29 100644 --- a/src/lib/form-field/_form-field-theme.scss +++ b/src/lib/form-field/_form-field-theme.scss @@ -49,7 +49,7 @@ } } - .mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder, + .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder, .mat-focused .mat-form-field-placeholder.mat-form-field-float { .mat-form-field-required-marker { color: $required-placeholder-color; @@ -184,7 +184,7 @@ border-top: $infix-margin-top solid transparent; } - .mat-form-field-autofill-float { + .mat-form-field-autofill-control { &:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { @include _mat-form-field-placeholder-floating( $subscript-font-scale, $infix-padding, $infix-margin-top); diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index 15694919e78..449f60ecb7d 100644 --- a/src/lib/form-field/form-field.scss +++ b/src/lib/form-field/form-field.scss @@ -65,7 +65,7 @@ $mat-form-field-underline-height: 1px !default; // This is necessary because these browsers do not actually fire any events when a form auto-fill is // occurring. Once the autofill is committed, a change event happen and the regular md-form-field // classes take over to fulfill this behaviour. Assumes the autofill is non-empty. -.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper { +.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper { // The control is still technically empty at this point, so we need to hide non-floating // placeholders to prevent overlapping with the autofilled value. .mat-form-field-placeholder { diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index c3a3c72f3d0..6f02784aee0 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -52,7 +52,7 @@ let nextUniqueId = 0; @Directive({ selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`, host: { - 'class': 'mat-input-element', + 'class': 'mat-input-element mat-form-field-autofill-control', // Native input properties that are overwritten by Angular inputs need to be synced with // the native input element. Otherwise property bindings for those don't work. '[id]': 'id',