Change dcc.dropdown selected value text color

Dash Python
1

Hi, I was wondering if someone could assist me with figuring out how to add a section in my css to change the color of the selected item in a dcc.Dropdown.

dcc.Dropdown(
id=‘menu-1’,
className=‘nav-button’,
placeholder=‘Global Monitor’,
clearable=False,
multi=False,
options=[
{‘label’: ‘Test1’, ‘value’: ‘test1’},
{‘label’: ‘Test2’, ‘value’: ‘test2’},
]
)

I have been playing around with a number of items and trying to inspect the page but so far I haven’t figured this out. I am new to dash. In my css I have the following (some of which I am sure is redundant):

.nav-button .Select-control {
font-weight: bold;
color: rgb(10, 43, 88);
background-color: white;
background-clip: padding-box;
border: 0;
border-radius: 0rem;
outline: none;
text-align: center;
width: 17%;
}

.nav-button .Select-control:hover {
box-shadow: none;
}

.nav-button .Select-menu-outer {
color: rgb(10, 43, 88);
border-color: rgb(132, 134, 155);
width: 17%;
align: center;
}

.nav-button .Select-value {
background-color: white;
color: rgb(10, 43, 88);
}

.nav-button .Select-placeholder {
color: rgb(10, 43, 88);
}

.nav-button .VirtualizedSelectOption {
color: rgb(10, 43, 88);
}

.nav-button .VirtualizedSelectFocusedOption {
background-color: rgb(244, 246, 246);
color: rgb(10, 43, 88);
}

.is-focused:not(.is-open) > .Select-control {
border-color: 0;
box-shadow: none;
color: rgb(10, 43, 88);
}

1 Like
2

I faced similar recently and wanted to reverse colors for a dark theme. I updated css in assets folder with following entries to do this:

div.Select-control {
background-color: #32383e;
background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
border-radius: 4px;
border: 0.5px solid #1b1e20;
color: #FFFFFF;
display: table;
border-spacing: 0;
border-collapse: separate;
height: 36px;
overflow: hidden;
}

div.Select–single>.Select-control .Select-value,
div.Select-placeholder {
color: #FFFFFF;
background: #32383e;
background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
left: 0;
line-height: 34px;
padding-left: 14px;
padding-right: 10px;
position: absolute;
right: 0;
top: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/border: 0.5px solid #1b1e20;/
border-radius: 4px;
}

div.Select.has-value.Select–single > .Select-control .Select-value .Select-value-label,
div.Select.has-value.is-pseudo-focused.Select–single>.Select-control .Select-value .Select-value-label {
left: 0;
line-height: 34px;
padding-left: 14px;
padding-right: 10px;
position: absolute;
right: 0;
top: 0;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
}

which gave me the following result:
image

Hope it helps.

2 Likes
3

Sorry, missed in details above that I also added style: color and background-color in dcc.Dropdown definition so those style settings combined with CSS above got the above result.

                                dcc.Dropdown(id='dropdown-session'
                                , className='btn-sm m-0 p-0 pl-0 pr-0'
                                , options=[
                                            {'label': ' next', 'value': 'NEXT'},
                                            {'label': ' today', 'value': 'CURRENT'},
                                            {'label': ' previous', 'value': 'PREVIOUS'},
                                         ]
                                , style=
                                    { 'width': '135px',
                                      'color': '#212121',
                                      'background-color': '#212121',
                                    } 
                                , multi=False
                                , clearable=False
                                , searchable=False
                                , placeholder='date...'
                                , search_value='date...'
                                , value='CURRENT'
                                ),
2 Likes
4

Thanks John for your help! The did help me to get rid of the active box around the dropdown after selection and update the value. For some reason though I am able to change the background color of the selected item after it has been selected by modifying the .Select-value-label but what is weird is it is not letting me modify the text color. I am going to play around with it some more and i will post if I figure out what I was doing wrong based on what you provided. I may need to just add each element individually to see if one does what i am looking for.

Thanks again!
dw

2 Likes
5

Hi :slight_smile: Did you find any solution for this?

1 Like
6

I am having the same issue. The placeholder takes the white color but selected values do not. Have you found the solution?