Apologies about the vague question in the title, but I've been learning how to build and style dashboard's in plotly dash using CSS for several months now and I've always struggled when trying to style dropdown menus. That is until I tried to replicate this dashboard using this code because I liked how the dropdown looked:
It appears that the code that controls this is in the custom-styles.css file and looks like:
.Select-menu-outer {
background-color: #2f3445;
border: 1px solid gray;
}
.Select div {
background-color: #2f3445;
}
.Select-menu-outer div:hover {
background-color: rgba(255, 255, 255, 0.01);
}
.Select-value-label {
color: #a5b1cd !important;
}
But neither '.Select-menu-other', '.Select div' or '.Select-value-label' appear in the python files as a className (or at all for that matter), so I'm a bit confused because I thought in CSS the dot notation was used to create a class that would then have to be called from Python but it's as if these are pre-assigned classes.
So my questions are:
- What are these classes? Are they pre-assigned and in what language? Is there any documentation on them?
- Are there any other classes of this type that can used to control the styling of Radio Items, Sliders or Date Range Pickers etc?
- If I'm following somebody else's code how do I know if they're using a pre assigned class or a class that needs to be called explicitly
It looks like they might be something to do with Javascript but I couldn't find any documentation on them but I could be wrong so any help would be appreciated.