jpaton
January 3, 2024, 10:35am
1
Hi, i want to change the color of the selected option of my dcc.dropdown.
however, its allways black and i am not able to change it:
this is the dropdown style:
dropdown_styles = {
'width': '200px',
'fontSize': '16px',
'backgroundColor': colors['azul_catec'],
'color': colors['background'],
'font-color': 'white',
'borderRadius': '8px',
'cursor': 'pointer',
'marginRight': '10px',
'border': 'none',
'fontColor':'white'
}
AIMPED
January 3, 2024, 10:40am
2
Hey @jpaton welcome t the forums.
This might help:
Hi @tanya
Here are a few css selectors I’ve found useful for the styling the dropdowns. Try adding this to the css file in the assets folder. (More info on how to do that here . ) This example styles the dropdown so it works well for dark themes in Bootstrap.
/* input box */
.Select-control {
background-color: black;
}
/* changes the text color of input box */
.Select-value-label {
color: white !important;
}
.Select--single > .Select-control .Select-value, .Select-placehold…
jpaton
January 4, 2024, 8:48am
4
thanks for the help!!!
now i want the text to be bold, ¿how can i do that?
AIMPED
January 4, 2024, 9:16am
5
Just add the font-weight
to your css.
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
jpaton
March 8, 2024, 8:24am
6
But in that way, all my dropdowns will bw affected? i just want a few to be so…
AIMPED
March 8, 2024, 8:40am
7
You could create a custom css file in your assets folder and add a classname.
An example:
I finally made it. I added a className since I didn’t want to apply the css to all dcc.Dropdown() in my app.
Here a MRE:
import dash
from dash import html, dcc
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(
[
dcc.Dropdown(
options=[1, 2, 3],
multi=True,
style={
'width': '100%',
'margin-bottom': '20px'
},
…