如何设置RadioItems选中标签的样式

时间:2019-03-06 12:54:54

标签: python html css plotly plotly-dash

main.py

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.css.append_css({'external_url': 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'})
app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.RadioItems(
                id='ri-1',
                options=[
                    {'label': 'A', 'value': 'a'},
                    {'label': 'B', 'value': 'b'},
                    {'label': 'C', 'value': 'c'}
                ],
                labelClassName='ri-label'
            )
        ], className='ri-div')
    ], className='row'),
    html.Div([], className='row', id='ri-value-div')
], className='container')


@app.callback(
    Output('ri-value-div', 'children'),
    [Input('ri-1', 'value')]
)
def ri_cb(ri):
    print ri
    return str(ri)


if __name__ == '__main__':
    app.run_server(port=8050)

main.py生成此HTML代码,其中包含assets/main.csshttps://jsfiddle.net/7h1gtrk3/2/

我想在Dash中仅使用标签(隐藏单选按钮)生成RadioItems。 选中并悬停标签应为蓝色,其他标签应为灰色。

我无法将标签字符串封装在HTML元素中以对其进行样式设置。与CCS plus operator like this

选中的选项仍为灰色,用户看不到他选中的内容。是否可以修改dcc.RadioItems组件或以其他方式使用CSS或进行一些破解来解决此问题?

0 个答案:

没有答案