How to show placeholder when TextField is disabled?

Somehow vaadins input fields (TextField) do not show their placeholder when they are disabled. This is not standard behaviour of input fields outside of vaadin and I would like to override this behaviour somehow so my TextFields show their placeholders even if they are disabled.

But when I inspect the html and css of the vaadin-text-fields, I see no indication of how the placeholder is somehow hidden, therefore I don’t know what to override.

Can somebody help me to show placeholders for disabled TextField?

Edit: What I can do so far is style the placeholders - as long as the input is not disabled. So I know how to import the CSS into the component scope of the text field, and how to address the placeholder with the [correct css selectors]
(https://stackoverflow.com/a/2610741/3441504). The question is about what css rules I need to overwrite there.

I figured it out!

I had to overwrite the opacity to 1. [This SO thread]
(https://stackoverflow.com/a/26853319/3441504) helped to be able to inspect CSS for placeholders, after that it was easy to find out!

For future readers, here is my final css file

:host([disabled]
) [part="value"]
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    opacity: 1 !important;
}
:host([disabled]
) [part="value"]
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    opacity: 1 !important;
}
:host([disabled]
) [part="value"]
::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity: 1 !important;
}
:host([disabled]
) [part="value"]
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 1 !important;
}
:host([disabled]
) [part="value"]
::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 1 !important;
}
:host([disabled]
) [part="value"]
::placeholder { /* Most modern browsers support this now. */
    opacity: 1 !important;
}

which I loaded into the view with @CssImport(value = "./styles/components/disabledTextFieldWithPlaceholder.css", themeFor = "vaadin-text-field")

I was just about to answer you pointing to the CSS here https://github.com/vaadin/vaadin-text-field/blob/master/theme/lumo/vaadin-text-field-styles.html#L154 but good that you were already able to figure it out.

The rationale for hiding the placeholder for disabled fields is that there would be no possibility for the user to mistake the placeholder for the actual field value.

The purpose of the placeholder is to help the user fill in the value (in the correct format). When the field is disabled the user can’t fill in the value, so a placeholder is not necessary.

I realize there are probably different opinions to this, but this is the guideline Vaadin follows by default.

I agree with you, Jouni. I was not trying to do this because simply “it is the standard behaviour of inputs outside of vaadin”, but because in my grid headers I use textFields for filtering. these textfields do not have a label (looks strange), so I figured I would use the placeholder as “label” so the user knows what each column stands for. But when the grid is disabled, all column headers are empty textfields without paceholders so the user has no idea which column is which. That is where this need of mine comes from.