✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash Core Components DSS styles

Hi community,
very simple questions: I’d wish to change a style of the DCC. Seems easy to do it in the CSS files/in the app.

The issue is that I can’t find the “style sources” of the components to update the appropriate values.
(For your understanding, I can change padding, font size etc, however I don’t know how/what are the labels of the white in background/or the blue in the multi-dropdown.)

Hopefully, I’m clear.

Many thanks,
Vaclav

NOTE: I’ve visited the source of the dropdown: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/Dropdown.py

However, I don’t know if the styles are in:
style=Component.UNDEFINED
or in:
className=Component.UNDEFINED,

and also where to find it?

Many thanks in advance!
Vaclav

The CSS for dash-core-components lives here. The relevant ones for Dropdown are the files with “select” in the name. You can see which parts of the dropdown all the different classes apply to by using the inspector in your browser, then overwrite the styles applied by the different classes using your own CSS.

2 Likes

Hello @tcbegley,
that was great and promising, however I’ve had to fail somewhere.
As I’m not very experienced in the CSS and web and just want to customize some basic elements, I took to source of the select and added to the external file:
https://codepen.io/vaclavku/pen/EMdYoa.css

I’ve changed the colors (color, border-color, background-color) and the height of the elements and the size of font.
Unfortunately, the look of the elements don’t change.
Vaclav

Hey @vaclavku

The CSS for the default styles in dash-core-components is always loaded, and so it may be that the styles as defined there are being given priority over your modifications. You can ensure that your changes always get applied by using a more specific CSS selector. Read this excellent explanation from Mozilla if you’re not sure what I’m talking about.

Here’s a little example you can try out. I have the following directory structure

.
├── app.py
└── assets
    └── style.css

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.Dropdown(
        options=[
            {"label": "Item 1", "value": 1},
            {"label": "Item 2", "value": 2},
            {"label": "Item 3", "value": 3},
            {"label": "Item 4", "value": 4},
        ],
        multi=True,
    ),
    id="wrapper",
)

if __name__ == "__main__":
    app.run_server()

style.css

#wrapper .Select--multi .Select-value {
  background-color: #ff4444;
  color: #fff;
}

#wrapper .VirtualizedSelectFocusedOption {
  background-color: #ffeedd;
}

Briefly, what I did was wrap everything in my app in a div element with the id “wrapper”, then the selector #wrapper .VirtualizedSelectFocusedOption applies to any element of class VirtualizedSelectFocusedOption that is a child of an element with id wrapper. Because this is more specific than just selecting an element with class VirtualizedSelectFocusedOption, your changes will get priority over the default.

Anyway, when I run the above I see something like this

Let me know if that helps you.

1 Like

Just to add on to @tcbegley’s comment about specificity, my approach is using the ‘copy css selector’ when right clicking on an element in the browser Dev tool elements section. This of course gives a very unique selector so what I then do is try to take away elements of specificity one by one until I reach that threshold where the dcc style takes precedence.

For example, here is the css selector I used to edit the font of a drop-down for when it is disabled:

Select.control-panel__dropdown.has-value.is-disabled diV.Select-control div div.Select-value span.Select-value-label { 
 //CSS goes here
}

hello @tcbegley, @mbkupfer
many thanks.
That’s very helpful.
I now fully understand the concept/message. However, it seems now it’s far behind my potentials.
I’ll need a create a list of possible selectors the design really asks…
Cheers.
Vaclav

hello @tcbegley, @mbkupfer,
once more: I thank your for inspiration. I’ve consolidated my motivation and finally found what you meant.
Just a summary for other newbees if interested:

  1. Need to create a new external CSS file. (Also possibility to copy the CSS provided.)
  2. Use the inspect on the web browser to find the necessary elements with the method of trial/error.
  3. Publish the new values in the external CSS.
  4. JUST A NOTE: Never forget to delete cache files before new refresh.

Have nice days and good luck with this marvelous library.
Vaclav

2 Likes

Hi guys.
I was able to customize colors using follow CSS:
.Select–multi .Select-value {
background-color: white;
color: var(–brandColor);
border: 1px solid var(–borderColor);
}
.Select–multi .Select-value-icon {
border-right: 1px solid var(–borderColor);
}
.VirtualizedSelectFocusedOption {
background-color: var(–backgroundLiteColor);
}

My question is how to remove blue outline after new item added?
Thanks