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

Question

I want to change the background and color of the text in the drop-down list, but the background changes only in the mainline, and the color of the text on the contrary in the expanded list. How can I solve this problem? How do I change the background on hover? How to correctly register pseudo-classes for Dash, for example, 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()

score 0 · Accepted Answer · answered Feb 16 '21 at 21:04

It is 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.

Now as far as actually changing the background color of an individual option in a dropdown goes. I've looked in the inspector and found each individual select item is a div with a class of VirtualizedSelectOption.

So we can target each element that has this class and add the hover styles to it like this:

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

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

1 Answers1