diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index e06923f2ad..95d8ad351d 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -349,7 +349,11 @@ export class HaBaseTimeInput extends LitElement {
       text-align: center;
       --mdc-shape-small: 0;
       --text-field-appearance: none;
-      --text-field-padding: 0 4px;
+      --text-field-padding-top: 0;
+      --text-field-padding-bottom: 0;
+      --text-field-padding-start: 4px;
+      --text-field-padding-end: 4px;
+
       --text-field-suffix-padding-left: 2px;
       --text-field-suffix-padding-right: 0;
       --text-field-text-align: center;
diff --git a/src/components/ha-picker-combo-box.ts b/src/components/ha-picker-combo-box.ts
index 5f4f5f0831..d5a896545a 100644
--- a/src/components/ha-picker-combo-box.ts
+++ b/src/components/ha-picker-combo-box.ts
@@ -801,7 +801,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         }
 
         :host([clearable]) {
-          --text-field-padding: 0 0 0 var(--ha-space-4);
+          --text-field-padding-top: 0;
+          --text-field-padding-bottom: 0;
+          --text-field-padding-start: var(--ha-space-4);
+          --text-field-padding-end: 0;
         }
 
         ha-textfield {
diff --git a/src/components/ha-selector/ha-selector-color-rgb.ts b/src/components/ha-selector/ha-selector-color-rgb.ts
index d59406c9e5..40b0c1e455 100644
--- a/src/components/ha-selector/ha-selector-color-rgb.ts
+++ b/src/components/ha-selector/ha-selector-color-rgb.ts
@@ -51,7 +51,10 @@ export class HaColorRGBSelector extends LitElement {
       align-items: center;
     }
     ha-textfield {
-      --text-field-padding: 8px;
+      --text-field-padding-top: 8px;
+      --text-field-padding-bottom: 8px;
+      --text-field-padding-start: 8px;
+      --text-field-padding-end: 8px;
       min-width: 75px;
       flex-grow: 1;
       margin: 0 4px;
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index c4b84d0271..c59c26ea5d 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -95,11 +95,12 @@ export class HaTextField extends TextFieldBase {
         width: var(--ha-textfield-input-width, 100%);
       }
       .mdc-text-field:not(.mdc-text-field--with-leading-icon) {
-        padding: var(--text-field-padding, 0px 16px);
+        padding-top: var(--text-field-padding-top, 0px);
+        padding-bottom: var(--text-field-padding-bottom, 0px);
+        padding-inline-start: var(--text-field-padding-start, 16px);
+        padding-inline-end: var(--text-field-padding-end, 16px);
       }
       .mdc-text-field__affix--suffix {
-        padding-left: var(--text-field-suffix-padding-left, 12px);
-        padding-right: var(--text-field-suffix-padding-right, 0px);
         padding-inline-start: var(--text-field-suffix-padding-left, 12px);
         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
         direction: ltr;
@@ -110,12 +111,12 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
-      .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
-        padding-left: var(--text-field-suffix-padding-left, 0px);
-        padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
+      .mdc-text-field--with-trailing-icon {
+        padding-inline-start: var(--text-field-suffix-padding-left, 16px);
         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
+        direction: var(--direction);
       }
+
       .mdc-text-field:not(.mdc-text-field--disabled)
         .mdc-text-field__affix--suffix {
         color: var(--secondary-text-color);
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index d6384de0ca..a4f07951e8 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -328,7 +328,10 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
       flex-grow: 1;
     }
     ha-textfield {
-      --text-field-padding: 8px;
+      --text-field-padding-top: 8px;
+      --text-field-padding-bottom: 8px;
+      --text-field-padding-start: 8px;
+      --text-field-padding-end: 8px;
       min-width: 75px;
       flex-grow: 1;
       margin: 0 4px;