diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts
index bdccf06cb3..131e7ced25 100644
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@@ -2,6 +2,22 @@ import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
 
 const VaadinDatePicker = customElements.get("vaadin-date-picker");
 
+const documentContainer = document.createElement("template");
+documentContainer.setAttribute("style", "display: none;");
+documentContainer.innerHTML = `
+  <dom-module id="ha-date-input-styles" theme-for="vaadin-text-field">
+    <template>
+      <style>
+      [part="input-field"] {
+        top: 2px;
+        height: 30px;
+      }
+      </style>
+    </template>
+  </dom-module>
+`;
+document.head.appendChild(documentContainer.content);
+
 export class HaDateInput extends VaadinDatePicker {
   constructor() {
     super();