diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index f70788bb70b9..2b2cf07d1e1c 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -144,6 +144,61 @@
     </mat-card-content>
   </mat-card>
 
+  <mat-card>
+    <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
+    <mat-card-content>
+      <p>
+        <mat-form-field>
+          <mat-label>Legacy</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="standard">
+          <mat-label>Standard</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="fill">
+          <mat-label>Fill</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="outline">
+          <mat-label>Outline</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <button mat-button (click)="toggleSelected()">TOGGLE SELECTED</button>
+    </mat-card-content>
+  </mat-card>
+
   <div *ngIf="showSelect">
     <mat-card>
       <mat-card-subtitle>formControl</mat-card-subtitle>
diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index b399954f9b39..56f0305af7c5 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/src/demo-app/select/select-demo.ts
@@ -29,6 +29,7 @@ export class SelectDemo {
   currentPokemon: string[];
   currentPokemonFromGroup: string;
   currentDigimon: string;
+  currentAppearanceValue: string | null;
   latestChangeEvent: MatSelectChange;
   floatLabel = 'auto';
   foodControl = new FormControl('pizza-1');
@@ -135,4 +136,8 @@ export class SelectDemo {
   compareByReference(o1: any, o2: any) {
     return o1 === o2;
   }
+
+  toggleSelected() {
+    this.currentAppearanceValue = this.currentAppearanceValue ? null : this.digimon[0].value;
+  }
 }
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 620cd2b929fb..5f1898207938 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -46,9 +46,8 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   display: table-cell;
   vertical-align: middle;
 
-  // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
-  .mat-form-field-appearance-fill &,
-  .mat-form-field-appearance-standard & {
+  // When used in a box appearance form-field the arrow should be shifted up 50%.
+  .mat-form-field-appearance-fill & {
     transform: translateY(-50%);
   }
 
@@ -56,6 +55,22 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   .mat-form-field-appearance-outline & {
     transform: translateY(-25%);
   }
+
+  // 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%);
+  }
+
+  // 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
+  .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
+
+  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
+    transition: none;
+  }
 }
 
 .mat-select-arrow {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index d60bb6dc207d..f39c850077c6 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -202,6 +202,7 @@ export class MatSelectTrigger {}
     '[class.mat-select-disabled]': 'disabled',
     '[class.mat-select-invalid]': 'errorState',
     '[class.mat-select-required]': 'required',
+    '[class.mat-select-empty]': 'empty',
     'class': 'mat-select',
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_onFocus()',