Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

External CSS Horrors

Hi,

In trying to customize the look of dropdown inputs(for a dark theme), am finding that every aspect of a control needs to be specified in CSS. for example the selected value of a dropdown is styled iwth the following selector in the tags.

.has-value.Select–single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select–single>.Select-control .Select-value .Select-value-label

It is impossible to override this with external css.

Also, external css is loaded before all the style tags. But, if i’m creating external css, i almost always want it to override those built in styles. So what is the fix? How can we actually format these inputs using CSS?

Thanks,

I had the same issue. I used two strategies:

  1. Use a CSS preprocessor (like Sass), that helps to DRY and write cleaner code;
  2. Over-specify your CSS rules to supersede default rules: e.g., write div.Select instead of .Select (what should be sufficient)

Plus make sure you’re using a DCC version that is [more recent] than v.0.38.1 as there was a bug where your local CSS were loaded after default ones.

Do you mean newer than 0.38.1?

1 Like

Indeed!

(I meant that came later in the development of dash, i.e. when the project was older (in the sense of more mature) — but I agree my sentence is obviously totally misleading).
I’ve edited my post.