When I click one of my radio buttons, I want it’s background to change color, but I can’t seem to make it work.
Here’s a minimal example:
app.py
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.Div(id='raw', children='some text changed from elsewhere'),
html.Div(id='radio_like_btns'),
])
@app.callback(Output('radio_like_btns', 'children'),
[Input('raw', 'children')])
def update_chars(desc):
options = [{'label':l, 'value':i} for i, l in enumerate(['Size', 'Weight', 'Material'])]
return dcc.RadioItems(options=options, className='char-btn')
if __name__ == '__main__':
app.run_server()
stylesheet.css
/* The radio icons are mutable this way */
.char-btn input[type="radio"] {
background-color:#F6866E;
opacity:0.7;
z-index:100;
}
/* And the label bounding boxes are mutable this way */
.char-btn label {
padding:3px;
padding-right:20px;
border:1px solid #CCC;
cursor:pointer;
z-index:90;
color:red;
}
/* And hovering works this way*/
.char-btn label:hover {
background:green;
}
/* Doesn't work */
.char-btn input[type="radio"]:checked + label {
background:yellow;
}
My working directory is laid out in accordance with the docs like:
- app.py
- assets/
|-- stylesheet.css
Any help or pointers in the right direction would be much appreciated.
