Changing color of dropdown selected value.. Help! (dash 0.39.0, dash-core 0.44.0, dash-html 0.14.0 on Mac)

Dash Python
1

Hello all

Im a new user. Ive managed to make a dash app. Im stuck on the dropdown.

I can change everything about the dropdowns that i need apart from the text color of my selection.

im using a style.css in the assets folder.

App source is as follows:-

html.Div([
html.Label([‘Choose Context:’], style={‘font-weight’: ‘bold’, ‘display’: ‘inline-block’,‘color’:‘white’}),
dcc.Dropdown(
id=‘context-drop’,
options=[{‘label’: i, ‘value’: contextList.index(i) + 1} for i in contextList],
value=1,
className=‘dropdown’
),
],style={‘width’: ‘20%’, ‘display’: ‘inline-block’,‘padding’:‘10px’}),

style.css:-

.Select-value-label {
color: red; (THIS DOESNT WORK!!!)

}

.Select-control {
background-color: yellow; (THIS WORKS FOR THE BACKGROUND/FILL COLOR)
}

Please help!!!

1 Like
2

Hi @amersheikh and welcome to the Dash community!

Try adding these two style in your style.css:

For all options:

.VirtualizedSelectOption {
    background-color: white;
    color: Black;
}

For selected option:

.VirtualizedSelectFocusedOption {
    background-color: lightgrey;
    color: yellow;
}
1 Like
3

Thanks for the welcome and your reply @atharvakatre. Ive tried both those before and they only apply to the items in the dropdown list.

Im trying to set the colour of the text after selection (and with the list not expanded).

See the attached figure (hope it comes through). Im trying to set the colour of the label ‘London.’

Any ideas ? I can get every other aspect to work on dropdowns and just stuck on something so simple :frowning:

Additionally, where can i see all the style options for dash core objects ?

Kind Regards

Amer

Screen Shot 2021-06-15 at 5.52.00 PM.png

4

Not sure if that is possible, but I am no css expert.

If you are looking for all the available style options check out this answer by @AnnMarieW from a similar thread.

5

Hi @amersheikh

Try adding !important


.Select-value-label {
    color: red !important;
}

.Select-control {
    background-color: yellow;
}

image

1 Like
6

OMG!!! That worked AnnMarie. I am forever in your debt… :slight_smile:

I wasted hours yesterday trying to sort this…

Now tell me this… How did you figure it out ? Where did you find this information.

“Give a man a fish and he can feed himself for a day. Give a man the means to fish and he can feed himself for a lifetime.” :slight_smile:

2 Likes
8

Hey @amersheikh - I’m glad it worked for you!

I agree that the CSS is rather tedious, and I too have spent hours trying to figure things out. It’s not covered in the Dash docs, but that kinda makes sense – that’s not intended to be a CSS tutorial.

Here are some of the CSS resources I use:

Searching the forum can also help since someone has probably already asked the question. (I’ll do that and sometimes I find the answer in one of my own darn posts :woman_facepalming: :upside_down_face:)

I made an app the demos some of CSS I’ve learned while working on other projects. It’s mainly to show different Bootstrap themes in a Dash app, but it also has a lot on styling dash-core-components and the DataTable. You can see it here https://hellodash.pythonanywhere.com/.

As you find other CSS solutions, feel free to open an issue or a pull request on github and I’ll include it in on the site!

BTW - if the version numbers you posted in the header are accurate, you should upgrade to the latest version of Dash (1.20.0) to get all the new features.

1 Like
9

Thanks for all the useful info and tips. Live long and prosper :slight_smile:

1 Like