# Change dcc.dropdown selected value text color

**URL:** <https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270>\
**Category:** Dash Python\
**Created:** [May 12, 2020, 2:22am UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270 "2020-05-12T02:22:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dwettig](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@dwettig](https://community.plotly.com/u/dwettig)\
**Post date:** [May 12, 2020, 2:22am UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/1 "2020-05-12T02:22:05Z")

</div>

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);  
> }

---

<div class="post-metadata">

**Author:** ![johndy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/johndy/32/14577_2.png) [@johndy](https://community.plotly.com/u/johndy)\
**Post date:** [May 12, 2020, 10:07pm UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/2 "2020-05-12T22:07:04Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/10a076eddd7a9132bce120d79f2926c97773390d.png)

Hope it helps.

---

<div class="post-metadata">

**Author:** ![johndy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/johndy/32/14577_2.png) [@johndy](https://community.plotly.com/u/johndy)\
**Post date:** [May 13, 2020, 4:35pm UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/3 "2020-05-13T16:35:07Z")

</div>

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'
                                ),
```

---

<div class="post-metadata">

**Author:** ![dwettig](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@dwettig](https://community.plotly.com/u/dwettig)\
**Post date:** [May 14, 2020, 2:26am UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/4 "2020-05-14T02:26:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mariasanchez](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mariasanchez](https://community.plotly.com/u/mariasanchez)\
**Post date:** [March 10, 2021, 12:05am UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/5 "2021-03-10T00:05:11Z")

</div>

Hi 🙂 Did you find any solution for this?

---

<div class="post-metadata">

**Author:** ![eambrioso](https://avatars.discourse-cdn.com/v4/letter/e/87869e/32.png) [@eambrioso](https://community.plotly.com/u/eambrioso)\
**Post date:** [May 9, 2022, 2:08pm UTC](https://community.plotly.com/t/change-dcc-dropdown-selected-value-text-color/39270/6 "2022-05-09T14:08:26Z")

</div>

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