vaadin 14

Textfield and label setReadOnly or setEnabled css to color change any idea?

Label has only setEnabled.
But I don’t understand your question. What do you want to do?

color change heading in setEnabled and readonly

Change the color of Text Field labels when they are read only and/or disabled?

vaadin-text-field[readonly]::part(label) {
  color: red;
}

your css not working sir! :host([theme~=“label-padding”][disabled]) [part=“input-field”] {
background-color: var(–lumo-contrast-5pct);
} this is correct sir?

where did you place it?

@CssImport(value = “./styles/vaadin-text-field-styles.css”, themeFor=“vaadin-text-field”) in vaadin-text-field-styles.css wrong place sir??

Right. In that case, as it’s a component-scoped style sheet, placed in the shadow DOM of the component, the CSS needs to be :

:host([readonly]) [part="label"] {
  color: red;
}

The earlier CSS I shared, that should go into a global scoped style sheet, such as the styles.css file in your theme.

Or @CssImport("./styles.css") without themeFor

textfield setenabled means same css work or only readonly?

only readonly

If you want the same styles for both, use this:

:host([readonly]) [part="label"],
:host([disabled]) [part="label"] {
  color: red;
}

Or this if you want to be fancy :slightly_smiling_face:

:host(:is([readonly], [disabled])) [part="label"] {
  color: red;
}

Or this if you want to put the CSS in a global style sheet (not shadow DOM):

vaadin-text-field:is([readonly], [disabled])::part(label) {
  color: red;
}

ok thank u sir!!!