如何在Plotly/Dash中管理CSS伪类？

Question

我想更改下拉列表中文本的背景和颜色，但背景仅在主线中发生变化，而在展开列表中文本颜色则相反。我怎么解决这个问题？如何更改悬停时的背景？如何为Dash正确注册伪类，例如：a: hover?

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

app = dash.Dash(__name__)

style = {'background': '#111', 'color': 'blue', 'textAlign': 'center'}
dropdown_style = {'color':'red', 'width': '300px', 'background': '#777'}

upload_div = html.Div([
        dcc.Dropdown(
                id='upload_id',
                options=[{'label': i, 'value': i} for i in ['a', 'b']],
                value='a',
                style = dropdown_style
                ), 
        html.Div(id='container')])

@app.callback(
    Output('container', 'children'),
    Input('upload_id', 'value')
)
def update_uploads(upload):
    return upload

app.layout = html.Div(id='body', children=upload_div, style=style)
app.run_server()

Answer 1

是not possible with inline styles, but it possible if you include css files in your dash app. For how to include css in dash apps see the documentation here.

现在就实际更改下拉列表中 individual 选项的背景颜色而言。我查看了检查器，发现每个 individual select 项目都是 div，class 为 VirtualizedSelectOption。

因此我们可以定位每个具有此 class 的元素并向其添加悬停样式，如下所示：

div.VirtualizedSelectOption:hover  {
  background-color: blue;
}

如何在Plotly/Dash中管理CSS伪类？

How to manage CSS pseudo-classes in Plotly/Dash?

html

css

python

plotly

plotly-dash