How to change the hot pink color of dropdowns in dash-table

The CSS style of the dropdowns for dash-table is default hot-pink and I am not a fan.

Using ‘style_cell’ appears to have no effect, and using my browser’s inspector I am unable to find the relevant style that I need to override.

Thanks in advance!

2 Likes

Hi @hobobot, were you able to figure out a solution to your issue? I have an issue on similar lines- I want to change the z-index of the dropdown in the table but unable to find the correct classname.

Thanks,
Vivek

Hi guys,

Here is what I found so far. To place inside your CSS file. Example with black color.

To change the Dropdown Menu itself :

.Select-menu-outer {
     --accent : black;
}

To change the arrow :

.Select-arrow {
	--accent: black;
} 

If you activated the possibility to delete Rows and Columns :

.dash-delete-cell {
	--accent : black;
}

.column-header--edit{
	--accent : black;
}

.column-header--delete{
	--accent : black;
}

Hope it helps,

Quentin

2 Likes

Thanks @qdumont for finally solving this mystery!

2 Likes

@hobobot, my pleasure. But I am still trying to figure out, how to change the color before hovering actually.

Hi @qdumont did you maybe find the solution to change the color of the ‘X’ already?
Thank you in advance!

Hey @MHxia, did you try one of the following ?

.dash-delete-cell {
	--accent : black;
}

.column-header--edit{
	--accent : black;
}

.column-header--delete{
	--accent : black;
} 

"
.dash-delete-cell" should be the one you are looking for

Hi @qdumont, Thanks for the answer but i think as you explained before this is only when you hover. How can i make it black by default?

Thanks in advance!

Hi @MHxia , sorry I am a bit confused, it does appear Grey by default on mine and black when I hover :

However, I use bootstrap within my app, maybe that is why :

import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID, dbc.themes.FLATLY])

Also, if you use Bootstrap, be sure to add within your css file :

.Select-menu-outer {
display : inline-block !important;
}

otherwise the dropdown menu won’t appear in your datatable if you use the dropdown options.

Hi @Qdumont,
Sorry for the confusion, but what im trying to do is change the default color of the ‘X’
the hover has been fixed by your previous answer. It is now blue/grey, but i want it to be also white.

2019-07-17_15h32_00

Thanks!

Hey @MHxia,

I have been trying for a couple of hours, without success unfortunately. Maybe opening a new topic could bring a faster answer.

Sorry about that,

Quentin