Change <fluent-select> and <fluent-option> background color

[benthecoder]

I’m trying to change the background colours of <fluent-select> and <fluent-option> elements in CSS. Preferably, I’d use no JavaScript (I want the solution to be as simple as possible) and no React (I’m not set up with it). I want to change it to the “accent” appearance, which is a blue by default or change it to a custom colour. This is the code I’m using to create the select component:

      <fluent-select title="Select a page to navigate to">
        <fluent-option value="1" onclick="console.info('Beginning clicked.')">Beginning</fluent-option>
        <fluent-option value="2">Middle</fluent-option>
        <fluent-option value="3">End</fluent-option>
      </fluent-select>

I tried this CSS code to change the colour:

fluent-select {
    background-color: red;
}

This turned the element’s colour red while the page was loading, but then turned back to white. Somehow, I’m able to change the font colour with color: #FFFFF; but not the background colour. Is this even possible?

[PaulOB]

@benthecoder

   <fluent-select title="Select a page to navigate to">
        <fluent-option value="1" onclick="console.info('Beginning clicked.')">Beginning</fluent-option>
        <fluent-option value="2">Middle</fluent-option>
        <fluent-option value="3">End</fluent-option>
      </fluent-select>

I don’t know anything about fluent-selects but I just copied an example from the web and it seems you can style the very basic parts with css.

However there are many internal parts (such as the option wrapper) that are not accessible to CSS and are in the shadow dom and can only be styled by js using the shadow dom.

I believe the idea is that these components aren’t affected by the rest of the page’s css.

If you need full control then you would need to use the methods that come with that component or use some other simpler custom select.

[benthecoder]

Thanks for the code! Works great!