diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 9e6e400fccce..1a8411e5c626 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -247,7 +247,9 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     // The datepicker module can be used both with MDC and non-MDC form fields. We have
     // to conditionally add the MDC input class so that the range picker looks correctly.
     if (_formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
-      _elementRef.nativeElement.classList.add('mat-mdc-input-element');
+      const classList = _elementRef.nativeElement.classList;
+      classList.add('mat-mdc-input-element');
+      classList.add('mat-mdc-form-field-control');
     }
 
     // TODO(crisbeto): remove `as any` after #18206 lands.