dcc.RadioItems and label style

[David22]

help(dcc.RadioItems) returns
A RadioItems component.
| RadioItems is a component that encapsulates several radio item inputs.
| The values and labels of the RadioItems is specified in the options
| property and the seleced item is specified with the value property.
| Each radio item is rendered as an input with a surrounding label.
|
| Keyword arguments:
| - id (string; optional): The ID of this component, used to identify dash components
| in callbacks. The ID needs to be unique across all of the
| components in an app.
| - options (list; optional): An array of options
| - value (string; optional): The currently selected value
| - style (dict; optional): The style of the container (div)
| - className (string; optional): The class of the container (div)
| - inputStyle (dict; optional): The style of the radio element
| - inputClassName (string; optional): The class of the radio element
| - labelStyle (dict; optional): The style of the that wraps the radio input
| and the option’s label
| - labelClassName (string; optional): The class of the that wraps the radio input
| and the option’s label

How can I apply a style to one label, and another style to another label? (eg: one must have flex:1, the second one flex:2)

[tcbegley]

You can achieve this with some custom CSS, I’m not aware of a way of doing this only in Python.

Here’s an example I came up with.

.
├── app.py
└── assets
    └── style.css

# app.py
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.RadioItems(
        options=[
            {"label": "Option 1", "value": 1},
            {"label": "Option 2", "value": 2},
            {"label": "Option 3", "value": 3},
            {"label": "Option 4", "value": 4},
            {"label": "Option 5", "value": 5},
            {"label": "Option 6", "value": 6},
            {"label": "Option 7", "value": 7},
        ]
    ),
    id="radioitems",
    style={"padding": "10px", "max-width": "800px", "margin": "auto"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

with the following CSS in my “assets” folder

/* style.css */
#radioitems label:nth-child(4) {
  color: red;
  flex: 1;
}

#radioitems label:nth-child(5) {
  color: blue;
  flex: 2;
}

#radioitems > div {
  display: flex;
}

Which gives me this:

[David22]

Haaa ! Thank you @tcbegley !!!