Customizing color of a disabled TextField and EmailField

Flow
1

Folks, what’s the best way to customize the color of a disabled TextField and EmailField using CSS? I poked around with Chrome dev tools, but couldn’t find a way. Thank you!

2

Components documentation mentions all the selectors and stylable parts.

To target only TextField and EmailField you would do

vaadin-text-field[disabled]::part(input-field),
vaadin-email-field[disabled]::part(input-field) {
    --lumo-disabled-text-color: red;
    background-color: green;
}

This was actually trickier than I though because the disabled state overrides -vaadin-input-field-value-color and --vaadin-input-field-background variables.

1 Like
3

Juuso, thank you! That was a follow up question, how can I set the color of the disabled fields to the color of the editable field value?

4

I think these are all the styles that affect the disabled state:

vaadin-text-field

@media (forced-colors: active) {
  :host([disabled]) [part='input-field'] {
    outline-color: GrayText;
  }
}

:host([disabled]) [part$='button'],
:host([readonly]) [part$='button'] {
  color: var(--lumo-contrast-20pct);
  cursor: default;
}

:host([disabled]) [part='helper-text'] {
  color: var(--lumo-disabled-text-color);
  -webkit-text-fill-color: var(--lumo-disabled-text-color);
}

:host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
  opacity: 0;
}

:host([disabled]) {
  pointer-events: none;
  --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
}

:host([disabled]) [part='label'],
:host([disabled]) [part='input-field'] ::slotted(*) {
  color: var(--lumo-disabled-text-color);
  -webkit-text-fill-color: var(--lumo-disabled-text-color);
}

vaadin-input-container

:host([disabled]) {
  background-color: var(--lumo-contrast-5pct);
}

:host([disabled]) ::slotted(*) {
  color: var(--lumo-disabled-text-color);
  -webkit-text-fill-color: var(--lumo-disabled-text-color);
}