How do I edit the style of the readonly version of the TextField to have a solid border?

In essence I want to change the dashed border to a solid border but I can’t seem to find a way to do it in css, with a theme variant, or even using the theme editor. Any assistance would be helpful.

In essence basically like setEnabled(false) but with the label the same as readonly.

Looking at the docs:


this would be my first guess

Yeah I’ve been trying to play with that but I don’t fully understand how it all works. It would be great if there was an example to work from.

And when I was able to apply a css style it was not lining up either which was even more confusing… Rolf has written a good article for the basics, in the end those are all standard CSS selectors and no fancy Vaadin specific stuff as before

I’ll take a ook. I’ve been trying to go through the video as well.

So that’s my challenge. I do say:

vaadin-text-field[readonly]::part(input-field) {
color: lightblue;
background-color: yellow;
border: solid 1px orange;

color and backgroudn change, and doing this adds an orange border, the dashed border is still present…

I suspect it’s inherited from another level but I can’t seem to figure out where. Inspected in Chrome doesn’t show anything…

Btw that document really helped.

I think that was a little bit trickier because it’s defined as an ::after pseudo element

vaadin-text-field[readonly]::part(input-field)::after {

border: solid 1px orange;


That is exactly it. Thank you. How did you figure it out? I ask because it’s the first I see of after.

Experience :see_no_evil: had to deal with it once, you can also see those pseudo elements in the browser (I’m normally using Firefox Developer Edition, but chrome should also have it)

Also do you know if there’s a way to dynamically apply a style? For example having a user define a background color for say sold cars in list vs new cars and so on? I can’t seem to find much documenttion on that either.


It depends where those colors are needed… depending on that different ways come to mind… if it’s easy and no grid involved using getElement().getStyle can get you really far

I did it in Vaadin 23 and earlier using something along the lines of:

.paid {
background-color: var(–paid-background-color);

and then in Java doing:

grid.getElement().getStyle().set(“–” + name + “-background-color”, color);

But that’s the old way

Still valid :sweat_smile: