diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 1805790eb2d3e..fac44819a3d25 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -365,6 +365,10 @@ body.trashing #publish-settings {
 	width: 46px;
 }
 
+.customize-control-date_time select {
+	vertical-align: top;
+}
+
 .date-time-fields .date-input.year {
 	width: 65px;
 }
diff --git a/src/wp-includes/customize/class-wp-customize-date-time-control.php b/src/wp-includes/customize/class-wp-customize-date-time-control.php
index 1b445af37f764..dcf4e4e7288c4 100644
--- a/src/wp-includes/customize/class-wp-customize-date-time-control.php
+++ b/src/wp-includes/customize/class-wp-customize-date-time-control.php
@@ -154,7 +154,7 @@ public function content_template() {
 						esc_html_e( 'Day' );
 						?>
 					</label>
-					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
+					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day tiny-text" data-component="day" min="1" max="31" />
 					<?php $day_field = trim( ob_get_clean() ); ?>
 
 					<?php ob_start(); ?>
@@ -164,7 +164,7 @@ public function content_template() {
 						esc_html_e( 'Year' );
 						?>
 					</label>
-					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
+					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year tiny-text" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
 					<?php $year_field = trim( ob_get_clean() ); ?>
 
 					<?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
@@ -182,7 +182,7 @@ public function content_template() {
 						</label>
 						<# var maxHour = data.twelveHourFormat ? 12 : 23; #>
 						<# var minHour = data.twelveHourFormat ? 1 : 0; #>
-						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
+						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour tiny-text" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
 						:
 						<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">
 							<?php
@@ -190,7 +190,7 @@ public function content_template() {
 							esc_html_e( 'Minute' );
 							?>
 						</label>
-						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute tiny-text" data-component="minute" min="0" max="59">
 						<# if ( data.twelveHourFormat ) { #>
 							<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">
 								<?php