Uppercasing text field input

Hi,
I had the following stylesheet:

:host(.uppercase) [part="value"] {
    text-transform: uppercase;
}

And applied the class uppercase to a TextField, so that the input is always in uppercase. But after some upgrades I saw that the whole component including the label and helper where uppercased, which is not wanted. No I am struggeling some time already to fix this, but due all the theming changes I don’t know what is the correct way. I am on 23.3.x.

There is no part=value, only input-field

Indeed, the <input> element was refactored from a shadow part to a slotted element in V23 to improve accessibility, form auto-fill, etc, so the “value” part is no longer there. The V24 styling reference for TextField (https://vaadin.com/docs/latest/components/text-field/styling) is also correct for V23.3, and give us: vaadin-text-field > input

@useful-whale I already tried it with vaadin-text-field > input, but then nothing happens.

vaadin-text-field > input {
    /* Add your CSS styles here, for example: */
    /* background: var(--lumo-primary-color); */
    background: #54DE6E;
    text-transform: uppercase;
}

The only thing that partially works is:

:host::part(input-field) {
    /* Add your CSS styles here, for example: */
    /* background: var(--lumo-primary-color); */
    background: #54DE6E;
    text-transform: uppercase;
}

But this only styles the background green, but it doesn’t apply the uppercase to the text field.

I also noticed now, that even if the complete vaadin-text-field gets this property, it is not uppercased:

Ok, got it. I was in the local style sheet, so I had to use:
styles/components/vaadin-text-field

::slotted(input) {
    /* Add your CSS styles here, for example: */
    /* background: var(--lumo-primary-color); */
    background-color: #54DE6E;
    text-transform: uppercase;
}

Ending in:

:host(.input-uppercase) ::slotted(input) {
    /* Add your CSS styles here, for example: */
    /* background: var(--lumo-primary-color); */
    background-color: #54DE6E;
    text-transform: uppercase;
}

ah, yes, you can style using “shadow dom css”, OR with global css, and the selectors are totally different depending on where you put the css.

What I suggested would work in global css, e.g. in styles.css

Yea, I also switched to that, since it is the suggested styling in v24