How to style a textfield's border?

Flow
1

Hello,

How can I edit the textfield styling to give it a border?
I tried it with usual CSS Classes, but that sets a border for the label and input field. Then I tried [this]
(https://vaadin.com/forum/thread/17170148/17719439), but I couldn’t use it.

I modified the selected answer to: .border-red[part=“input-field”]
but it didn’t work

I want a CSS Class for an red and a green border (I am changing it on input).

Best Regards
Mats

2

The things inside a TextField are inside a shadow DOM and normal css that was loaded globally doesn’t work. I’m not going to explain it all here, as it’s a quite complex topic, and I’m not a master of it yet, but here is vaadins [Styling Components Documentation]
(https://vaadin.com/docs/v14/themes/styling-components.html)

Here is how I think it should work:

// frontend/styles/redGreenTextField.css
:host(.border-red [part="input-field"]
) {
	border: 2px solid red;
}
:host(.border-green [part="input-field"]
) {
	border: 2px solid green;
}

// either on MainView class, or the actual routed view class, or maybe even on your own class that extends TextField.
// the 'themeFor' attribute will ensure that the css is loaded into the shadow-DOM of each element with the HTML-tag 'vaadin-text-field'
@CssImport(value="./styles/redGreenTextField.css", themeFor="vaadin-text-field")
public class MainView implements RouterLayout {
	...
}