diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index c9932a43e58a..7b07ca716324 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -581,9 +581,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
 
-    <mat-form-field appearance="box">
-      <mat-label>Box appearance</mat-label>
-      <input matInput [(ngModel)]="boxAppearance" required>
+    <mat-form-field appearance="fill">
+      <mat-label>Fill appearance</mat-label>
+      <input matInput [(ngModel)]="fillAppearance" required>
       <mat-error>This field is required</mat-error>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
@@ -606,9 +606,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
         </mat-form-field>
       </td>
       <td>
-        <mat-form-field appearance="box" style="width: 100%">
-          <mat-label>Box appearance</mat-label>
-          <input matInput [(ngModel)]="boxAppearance" required>
+        <mat-form-field appearance="fill" style="width: 100%">
+          <mat-label>Fill appearance</mat-label>
+          <input matInput [(ngModel)]="fillAppearance" required>
           <mat-error>This field is required</mat-error>
           <mat-hint>Please type something here</mat-hint>
         </mat-form-field>
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 04ed022cb3b6..b42a9f66f8fe 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -54,7 +54,7 @@ export class InputDemo {
 
   legacyAppearance: string;
   standardAppearance: string;
-  boxAppearance: string;
+  fillAppearance: string;
 
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);
diff --git a/src/lib/form-field/BUILD.bazel b/src/lib/form-field/BUILD.bazel
index 77b35dda754e..dc5c0269df82 100644
--- a/src/lib/form-field/BUILD.bazel
+++ b/src/lib/form-field/BUILD.bazel
@@ -9,7 +9,7 @@ ng_module(
   module_name = "@angular/material/form-field",
   assets = [
     ":form_field_css",
-    ":form_field_box_css",
+    ":form_field_fill_css",
     ":form_field_legacy_css",
     ":form_field_standard_css",
     "//src/lib/input:input_css"
@@ -29,8 +29,8 @@ sass_binary(
 )
 
 sass_binary(
-  name = "form_field_box_scss",
-  src = "form-field-box.scss",
+  name = "form_field_fill_scss",
+  src = "form-field-fill.scss",
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
@@ -56,10 +56,10 @@ genrule(
 )
 
 genrule(
-  name = "form_field_box_css",
-  srcs = [":form_field_box_scss"],
-  outs = ["form-field-box.css"],
-  cmd = "cat $(locations :form_field_box_scss) > $@",
+  name = "form_field_fill_css",
+  srcs = [":form_field_fill_scss"],
+  outs = ["form-field-fill.css"],
+  cmd = "cat $(locations :form_field_fill_scss) > $@",
 )
 
 genrule(
diff --git a/src/lib/form-field/_form-field-box-theme.scss b/src/lib/form-field/_form-field-fill-theme.scss
similarity index 57%
rename from src/lib/form-field/_form-field-box-theme.scss
rename to src/lib/form-field/_form-field-fill-theme.scss
index 7242c2307a0f..70a9b0bef171 100644
--- a/src/lib/form-field/_form-field-box-theme.scss
+++ b/src/lib/form-field/_form-field-fill-theme.scss
@@ -4,31 +4,38 @@
 @import '../core/typography/typography-utils';
 
 
-// Theme styles that only apply to the box appearance of the form-field.
+// Theme styles that only apply to the fill appearance of the form-field.
 
-@mixin mat-form-field-box-theme($theme) {
+@mixin mat-form-field-fill-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
-  $box-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.06));
-  $box-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.03));
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
+  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
+  $label-disabled-color: mat-color($foreground, disabled-text);
 
-  .mat-form-field-appearance-box {
+  .mat-form-field-appearance-fill {
     .mat-form-field-flex {
-      background-color: $box-background;
+      background-color: $fill-background;
     }
 
     &.mat-form-field-disabled .mat-form-field-flex {
-      background-color: $box-disabled-background;
+      background-color: $fill-disabled-background;
     }
 
     .mat-form-field-underline::before {
       background-color: $underline-color;
     }
 
-    &.mat-form-field-disabled .mat-form-field-underline::before {
-      background-color: transparent;
+    &.mat-form-field-disabled {
+      .mat-form-field-label {
+        color: $label-disabled-color;
+      }
+
+      .mat-form-field-underline::before {
+        background-color: transparent;
+      }
     }
   }
 }
@@ -37,46 +44,55 @@
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-box-dedupe: 0;
+$mat-form-field-fill-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
-@mixin _mat-form-field-box-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-box-dedupe)
+@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $mat-form-field-box-dedupe;
+  width: 100% / $font-scale + $mat-form-field-fill-dedupe;
 
-  $mat-form-field-box-dedupe: $mat-form-field-box-dedupe + 0.00001 !global;
+  $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-box-typography($config) {
+@mixin mat-form-field-fill-typography($config) {
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
   // The padding on the infix. Mocks show half of the text size.
-  $infix-padding: 0.5em;
+  $infix-padding-top: 0.25em;
+  $infix-padding-bottom: 0.75em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
   $infix-margin-top: 1em * $line-height * $subscript-font-scale;
-  // The amount we offset the label in the box appearance.
-  $box-appearance-label-offset: -0.5em * $line-height;
+  // The amount we offset the label in the fill appearance.
+  $fill-appearance-label-offset: -0.5em * $line-height;
+
+  .mat-form-field-appearance-fill {
+    .mat-form-field-infix {
+      padding: $infix-padding-top 0 $infix-padding-bottom 0;
+    }
+
+    .mat-form-field-label {
+      margin-top: $fill-appearance-label-offset;
+    }
 
-  .mat-form-field-appearance-box {
     .mat-form-field-label {
-      margin-top: $box-appearance-label-offset;
+      top: $infix-margin-top + $infix-padding-top;
     }
 
     &.mat-form-field-can-float {
       &.mat-form-field-should-float .mat-form-field-label,
       .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
 
       .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
       .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
 
@@ -85,7 +101,7 @@ $mat-form-field-box-dedupe: 0;
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
       .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
     }
diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss
index 71fab72c3919..6864684b3364 100644
--- a/src/lib/form-field/_form-field-theme.scss
+++ b/src/lib/form-field/_form-field-theme.scss
@@ -2,7 +2,7 @@
 @import '../core/theming/theming';
 @import '../core/style/form-common';
 @import '../core/typography/typography-utils';
-@import 'form-field-box-theme.scss';
+@import 'form-field-fill-theme.scss';
 @import 'form-field-legacy-theme.scss';
 @import 'form-field-standard-theme.scss';
 
@@ -18,7 +18,7 @@
   $is-dark-theme: map-get($theme, is-dark);
 
   // Label colors. Required is used for the `*` star shown in the label.
-  $label-color: mat-color($foreground, secondary-text);
+  $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
   $focused-label-color: mat-color($primary);
   $required-label-color: mat-color($accent);
 
@@ -33,7 +33,7 @@
   }
 
   .mat-hint {
-    color: mat-color($foreground, secondary-text);
+    color: $label-color;
   }
 
   .mat-focused .mat-form-field-label {
@@ -94,7 +94,7 @@
 
   @include mat-form-field-legacy-theme($theme);
   @include mat-form-field-standard-theme($theme);
-  @include mat-form-field-box-theme($theme);
+  @include mat-form-field-fill-theme($theme);
 }
 
 // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
@@ -221,5 +221,5 @@ $mat-form-field-dedupe: 0;
 
   @include mat-form-field-legacy-typography($config);
   @include mat-form-field-standard-typography($config);
-  @include mat-form-field-box-typography($config);
+  @include mat-form-field-fill-typography($config);
 }
diff --git a/src/lib/form-field/form-field-box.scss b/src/lib/form-field/form-field-box.scss
deleted file mode 100644
index a939dd6bfba1..000000000000
--- a/src/lib/form-field/form-field-box.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-
-
-// Styles that only apply to the box appearance of the form-field.
-
-// The border radius for the form field box.
-$mat-form-field-box-border-radius: 4px !default;
-// The height of the underline at the bottom of the form field box.
-$mat-form-field-box-underline-height: 2px !default;
-// The horizontal padding between the edge of the form field box and the start of the text.
-$mat-form-field-box-side-padding: 1em !default;
-// The vertical padding between the edge of the form field box and the start of the text as well as
-// between the floating label and the value.
-$mat-form-field-box-line-spacing: 0.5em !default;
-// The scale of the subscript and floating label text w.r.t the value text.
-$mat-form-field-box-subscript-font-scale: 0.75 !default;
-// The horizontal padding between the edge of the subscript box and the start of the subscript text.
-$mat-form-field-box-subscript-padding:
-    $mat-form-field-box-side-padding / $mat-form-field-box-subscript-font-scale;
-
-
-.mat-form-field-appearance-box {
-  .mat-form-field-flex {
-    border-radius: $mat-form-field-box-border-radius;
-    padding: $mat-form-field-box-line-spacing $mat-form-field-box-side-padding 0
-             $mat-form-field-box-side-padding;
-  }
-
-  .mat-form-field-underline {
-    height: $mat-form-field-box-border-radius;
-    border-radius: 0 0 $mat-form-field-box-border-radius $mat-form-field-box-border-radius;
-    overflow: hidden;
-  }
-
-  .mat-form-field-underline::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: $mat-form-field-box-underline-height;
-    width: 100%;
-  }
-
-  .mat-form-field-ripple {
-    bottom: 0;
-    height: $mat-form-field-box-underline-height;
-  }
-
-  // Note that we need this specific of a selector because we don't want
-  // the hover effect to show when the user hovers over the hints.
-  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
-    .mat-form-field-ripple {
-      opacity: 1;
-      transform: none;
-      transition: opacity 600ms $swift-ease-out-timing-function;
-    }
-  }
-
-  .mat-form-field-subscript-wrapper {
-    padding: 0 $mat-form-field-box-subscript-padding;
-  }
-}
diff --git a/src/lib/form-field/form-field-fill.scss b/src/lib/form-field/form-field-fill.scss
new file mode 100644
index 000000000000..28c4a321a0ad
--- /dev/null
+++ b/src/lib/form-field/form-field-fill.scss
@@ -0,0 +1,59 @@
+@import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
+
+
+// Styles that only apply to the fill appearance of the form-field.
+
+// The border radius for the form field fill box.
+$mat-form-field-fill-border-radius: 4px !default;
+// The height of the underline at the bottom of the form field fill box.
+$mat-form-field-fill-underline-height: 1px !default;
+// The height of the underline ripple at the bottom of the form field fill box.
+$mat-form-field-fill-underline-ripple-height: 2px !default;
+// The horizontal padding between the edge of the form field fill box and the start of the text.
+$mat-form-field-fill-side-padding: 0.75em !default;
+// The vertical padding between the edge of the form field fill box and the start of the text as
+// well as between the floating label and the value.
+$mat-form-field-fill-line-spacing: 0.75em !default;
+// The scale of the subscript and floating label text w.r.t the value text.
+$mat-form-field-fill-subscript-font-scale: 0.75 !default;
+// The horizontal padding between the edge of the subscript box and the start of the subscript text.
+$mat-form-field-fill-subscript-padding:
+    $mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;
+
+
+.mat-form-field-appearance-fill {
+  .mat-form-field-flex {
+    border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
+    padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
+             $mat-form-field-fill-side-padding;
+  }
+
+  .mat-form-field-underline::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: $mat-form-field-fill-underline-height;
+    width: 100%;
+  }
+
+  .mat-form-field-ripple {
+    bottom: 0;
+    height: $mat-form-field-fill-underline-ripple-height;
+  }
+
+  // Note that we need this specific of a selector because we don't want
+  // the hover effect to show when the user hovers over the hints.
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
+    .mat-form-field-ripple {
+      opacity: 1;
+      transform: none;
+      transition: opacity 600ms $swift-ease-out-timing-function;
+    }
+  }
+
+  .mat-form-field-subscript-wrapper {
+    padding: 0 $mat-form-field-fill-subscript-padding;
+  }
+}
diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss
index a79a00c00612..079ea0ba7267 100644
--- a/src/lib/form-field/form-field-standard.scss
+++ b/src/lib/form-field/form-field-standard.scss
@@ -6,10 +6,8 @@
 
 // The height of the underline.
 $mat-form-field-standard-underline-height: 1px !default;
-// The bottom margin of the underline (used to push it up to align with box appearance underline).
-$mat-form-field-standard-underline-margin-bottom: 1px !default;
 // The padding between the top of the form field and the label text (used to align the standard
-// form field with the box appearance).
+// form field with the fill appearance).
 $mat-form-field-standard-padding-top: 0.5em !default;
 
 
@@ -22,11 +20,10 @@ $mat-form-field-standard-padding-top: 0.5em !default;
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
     height: $mat-form-field-standard-underline-height;
-    margin-bottom: $mat-form-field-standard-underline-margin-bottom;
   }
 
   .mat-form-field-ripple {
-    top: 0;
+    bottom: 0;
     height: $mat-form-field-standard-underline-height * 2;
   }
 
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index 22df918d682f..62c577a7c9f4 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -62,7 +62,7 @@ export const _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
 let nextUniqueId = 0;
 
 
-export type MatFormFieldAppearance = 'legacy' | 'standard' | 'box';
+export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill';
 
 
 /** Container for form controls that applies Material Design styling and behavior. */
@@ -77,7 +77,7 @@ export type MatFormFieldAppearance = 'legacy' | 'standard' | 'box';
   // aren't using MatInput.
   styleUrls: [
     'form-field.css',
-    'form-field-box.css',
+    'form-field-fill.css',
     'form-field-legacy.css',
     'form-field-standard.css',
     '../input/input.css',
@@ -86,7 +86,7 @@ export type MatFormFieldAppearance = 'legacy' | 'standard' | 'box';
   host: {
     'class': 'mat-input-container mat-form-field',
     '[class.mat-form-field-appearance-standard]': 'appearance == "standard"',
-    '[class.mat-form-field-appearance-box]': 'appearance == "box"',
+    '[class.mat-form-field-appearance-fill]': 'appearance == "fill"',
     '[class.mat-form-field-appearance-legacy]': 'appearance == "legacy"',
     '[class.mat-input-invalid]': '_control.errorState',
     '[class.mat-form-field-invalid]': '_control.errorState',
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 4a9dde9a514e..fea0b126b848 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -1149,7 +1149,7 @@ describe('MatInput with forms', () => {
 });
 
 describe('MatInput with appearance', () => {
-  const nonLegacyAppearances: MatFormFieldAppearance[] = ['standard', 'box'];
+  const nonLegacyAppearances: MatFormFieldAppearance[] = ['standard', 'fill'];
   let fixture: ComponentFixture<MatInputWithAppearance>;
   let testComponent: MatInputWithAppearance;
   let containerEl: HTMLElement;
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 1a8305512d7b..8225a0f73950 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -47,7 +47,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   vertical-align: middle;
 
   // When used in a box appearance form-field the arrow should be centered in the box.
-  .mat-form-field-appearance-box & {
+  .mat-form-field-appearance-fill & {
     transform: translateY(-50%);
   }
 }