Update to 2026.4.0 input selects changed to white

Configuration Frontend
1

Post update to 2026.4.0 my input selects turned white but I’m not finding the theme property to change them.

Has it changed and I missed it?

image
image475×184 5.06 KB

2 
  ha-color-form-background: "#121A2A" # search bar background color
  ha-color-form-background-hover: "#1B2434" # search bar highlighted background color
  ha-color-form-background-disabled: green # used for something, did not yet figured out for what
  ha-color-form-ink-color: red # used for something, did not yet figured out for what
3

ha-color-form-background-disabled: is used for disabled number entities and others:

image
image711×101 3.13 KB

4

:grey_exclamation: :loudspeaker:
CHANGES TO Frontend Compontents in 2026

The ongoing migration and updates to the Material Design keeps messing up my frontend design. Luckely, I found the documentation on this. :grinning:

INPUT COMPONENTS

  • ha-input is the successor of ha-textfield
    • ha-textfield API stays but the component is migrated to use ha-input internally and will be removed in 2026.5
    • Also replaces ha-outlined-text-field
  • ha-input-search replaces search-input and search-input-outlined
  • ha-input-multi replaces ha-multi-textfield
  • ha-input-copy replaces copy-textfield
--ha-color-form-background: var(--ha-color-neutral-95);
--ha-color-form-background-hover: var(--ha-color-neutral-90);
--ha-color-form-background-disabled: var(--ha-color-neutral-80);

**FIND MORE HERE
Frontend component updates 2026.4

5

Thx…just found that yesterday myself.

6

On my iphone I noticed since he 2026.4 update now my drop downs are centered on the card rather than left aligned like normal

any idea how to fix this?

7

Anyone know how to target the borders and size of the input for a theme?

I can see its likely via, but not sure how to target it in card-mod-root.

wa-input::part(base) {
  height: 56px;
  background-color: var(--ha-color-form-background);
  border-top-left-radius: var(--ha-border-radius-sm);
  border-top-right-radius: var(--ha-border-radius-sm);
  border-bottom-left-radius: var(--ha-border-radius-square);
  border-bottom-right-radius: var(--ha-border-radius-square);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  padding: 0 var(--ha-space-4);
  position: relative;
   transition: background-color var(--wa-transition-normal) ease-in-out;
}

Thanks

8

Hello thank you for the tip
I do not found where to do modification (for ex I have mqtt entities concerned)

Any help ?
thanks

9

Can someone please help me here with where to add/replace these lines of code? From my reading, they should help my white text on white background issue, which has arisen over the past couple of updates. Thanks in advance

10

You need to add/change them in your theme yaml file.