Style labels for all fields

Flow
1

Hello, is there a way for styling labels of all fields. I know I can write custom label styling for each field (text-field, combo-box-field, …) but is there a way to achieve this via let’s say shared style or so?

Thank you
JS

2

All fields that use text field internally (meaning, they have a text field looking input), they all inherit the styling of text field automatically.

If you want to style radio and checkbox group labels as well, then you need to write a style sheet that targets multiple components. You can do that by providing multiple component names in the “theme for” attribute, for example, theme-for="vaadin-text-field vaadin-radio-group".

3

Hello Jouni, thank you for your reply. I have solved it as custom style themeFor=“vaadin-*” with content:

:host([has-label]
) [part="label"]
 {
    font-weight: bold;
    color: var(--lumo-body-text-color);
}

It did the trick also. But when I used also readonly state selector not all fields were matched (ie. vaadin-custom-field doesn’t set readonly to dom tree when readonly).
Eventually we decided that we will use bolder labels for all fields (not metter readonly or not). But thank you for information that themeFor can be applied for multiple components this way. Is it possible to set it via annotation to?

Thanks