diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel
index d89be8714f6f..7f2ec58db2b1 100644
--- a/src/material/form-field/BUILD.bazel
+++ b/src/material/form-field/BUILD.bazel
@@ -62,6 +62,7 @@ sass_library(
         "_form-field-subscript.scss",
         "_mdc-text-field-structure-overrides.scss",
         "_mdc-text-field-textarea-overrides.scss",
+        "_user-agent-overrides.scss",
     ],
     deps = [
         "//:mdc_sass_lib",
diff --git a/src/material/form-field/_user-agent-overrides.scss b/src/material/form-field/_user-agent-overrides.scss
new file mode 100644
index 000000000000..0c64ab6ac79f
--- /dev/null
+++ b/src/material/form-field/_user-agent-overrides.scss
@@ -0,0 +1,24 @@
+// Mixin that resets user agent styles to make the form field behave consistently.
+@mixin private-form-field-user-agent-overrides() {
+  .mat-mdc-form-field-input-control {
+    // Due to the native input masking these inputs can be slightly taller than
+    // the plain text inputs. We normalize it by resetting the line height.
+    &[type='date'],
+    &[type='datetime'],
+    &[type='datetime-local'],
+    &[type='month'],
+    &[type='week'],
+    &[type='time'] {
+      line-height: 1;
+    }
+
+    // Native datetime inputs have an element in the shadow DOM that makes them taller than
+    // other inputs. These changes reset the user agent styles to make them consistent.
+    // via https://8yd.no/article/date-input-height-in-safari
+    &::-webkit-datetime-edit {
+      line-height: 1;
+      padding: 0;
+      margin-bottom: -2px;
+    }
+  }
+}
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index 7a7a71b6bb52..a8310dddce89 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -9,6 +9,7 @@
 @use './form-field-focus-overlay';
 @use './form-field-high-contrast';
 @use './form-field-native-select';
+@use './user-agent-overrides';
 @use './mdc-text-field-textarea-overrides';
 @use './mdc-text-field-structure-overrides';
 
@@ -33,6 +34,7 @@
 @include form-field-focus-overlay.private-form-field-focus-overlay();
 @include form-field-native-select.private-form-field-native-select();
 @include form-field-high-contrast.private-form-field-high-contrast();
+@include user-agent-overrides.private-form-field-user-agent-overrides();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.