I would like to style radio button in a group but I don't know how to select the input or label part.

I use a "classic" RadioButtonGroup<String>() vaadin object. I just set a classname "myclassname" to it.

Now in my CSS stylesheet I have :

/* select the radiogroup */
.myclassname {
  background-color: red;
}

/* select each button in the myclassname radiogroup */
.myclassname vaadin-radio-button {
  background-color: blue;
}

/* select the label ???? */
.myclassname vaadin-radio-button [part='label'] {
    background-color: pink;
}

The last part for selecting the label in the radio button doesn't work. It doesn't work for the input part as well.

How to do for selecting input or label to customize them ?

Thank you

CodePudding user response：

Hey @jeje,

I'm not sure, but you can try this

For Label:-

.myclassname vaadin-radio-button label[for=email]
{
    // your style
}

And for input:-

input[type=number]{
    // your style
}

And also you should check out this:-

SeleCtors

I don't have any idea about that Vaadin, but if it's a style problem then you could try this

CodePudding user response：

The circle part is inside the shadow DOM of the component, so you need to use the ::part() selector. The label is in the light DOM, so you can use a regular descendant selector for that.

.myclassname vaadin-radio-button::part(radio) {
  background-color: blue;
}

.myclassname vaadin-radio-button label {
  background-color: pink;
}