Switch styles for Enabled and Disabled fields

Flow
1

Hello. I am wondering how would be the best approach to do a certain change. Users are used to the reverse of what Vaadin provides as editable and not editable field styling. Is there a smooth way just to reverse it, probably creating custom CSS classes that override some LUMO properties?
Can you guys give some ideas I can research, thanks.

2

What exactly do you mean exactly by reverse?

3

Do mean that editable fields would have a border and a white background (in light mode), and read-only fields wouldn’t have a border but would have a gray background?

1 Like
4

I mean exactly what Jouni described.
Editable fields will have gray background, and not editable will be white in light mode.

5

That sounds the opposite what I said, though :laughing:

But if you want editable fields to have a border and white background, add this to your styles:

html {
  --vaadin-input-field-background: #fff;
  --vaadin-input-field-border-width: 1px;
}

And to have a gray background for read-only fields:

[readonly]::part(input-field) {
  background: var(--lumo-contrast-20pct);
  --vaadin-input-field-readonly-border: transparent;
}
6

Oh. Sorry for the confusion I created with comment 3. Comment 4 is something I was trying to do, but I do not have a lot of experience with styling, so I forgot I can actually control the --vaadin variables. I will have to think of something that is compatible with the dark theme and your plugin as well.
Thanks, I am picking this as a solution.