Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Input styling (Fonts)

Hello!
Is there a way to change the style (Font Color, Font Size, Font Family) of the inputs like dropdowns and multi-dropdowns?

Thanks…

1 Like

The best way to do this would probably be to check out the default stylesheets for these components, copy them, modify them, and then serve them using https://plot.ly/dash/external-resources. Here are the default stylesheets: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-virtualized@9.9.0.css, https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-select@1.0.0-rc.3.min.css.

You may also be able to set the style attributes of a parent html.Div like:

html.Div(style={'fontColor': 'blue'}, children=dcc.Dropdown(...))

But I haven’t tried that myself.

Finally, I recommend using Chrome’s Debugger to manually inspect and modify styles live: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Setting the parent-Div style worked.

Thank you!

1 Like