Vaadin radio button child css not applying properly

Flow
1

I am applying css properties to vaadin radio button and selecting childs. css applies to first child properly but not to last child. below is snapshot or code snippet and ui result. this used to work fine in vaadin 14 but not in vaadin 24. please provide solution to resolve this.
image

2

image
image1177×128 5.1 KB

3

Please try :first-of-type and :last-of-type instead of :first-child and :last-child.
The reason why your CSS stopped working is that since Vaadin 22, vaadin-radio-gtoup also has label, error message and helper text elements in light DOM for better accessibility (in Vaadin 14, they were in the shadow DOM).

1 Like
4

I’d recommend using gap instead of margin in this case.

.ap-snap-access-radiogroup::part(group-field) {
  gap: 10px;
}