diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index fd5c0494eccf..c481577776f9 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -121,6 +121,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS = '[class.mat-form-field-invalid]': '_control.errorState', '[class.mat-form-field-can-float]': '_canLabelFloat', '[class.mat-form-field-should-float]': '_shouldLabelFloat()', + '[class.mat-form-field-has-label]': '_hasFloatingLabel()', '[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()', '[class.mat-form-field-disabled]': '_control.disabled', '[class.mat-form-field-autofilled]': '_control.autofilled', diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 22365e7f64d5..fcf98c9261db 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -57,10 +57,11 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a } // When used in a standard appearance form-field the arrow should be shifted up 50%, - // but only if it's not empty - .mat-form-field-appearance-standard .mat-select:not(.mat-select-empty) & { - transform: translateY(-50%); - } + // but only if it's not empty and it has a label. + .mat-form-field-appearance-standard.mat-form-field-has-label + .mat-select:not(.mat-select-empty) & { + transform: translateY(-50%); + } // Animate the arrow position, but only when the transitioning to empty (animate the arrow down) // This is in line with the mat-form-field label animation