Change Selected Background Color

[trymeouteh]

How do you change the background color of an selected option in Slim Select. I would like to change it to light green but I cannot figure this out.

This is my code below. When inspecting the elements, it will seem .ss-selected is the class that gives the selected options that light blue color.

<style>
    #mySelectElement .ss-selected {
        background-color: lightgreen;
    }
</style>

<select id="mySelectElement">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

[brianvoe]

https://codepen.io/brianvoe/pen/qByjoao

Slim Select uses css variables, so you can change the color that way.

Slim Select has two primary classes you can see in the src code and that is .ss-main and .ss-content everything sub of should be easily targetable.

You can always open inspect element and see what classes are being applied.

Hope this helps.

[trymeouteh]

Is there a list of CSS variables on the official website? Is there a way to change the selected option background color with a CSS variable?

[brianvoe]

https://github.com/brianvoe/slim-select/blob/master/src/slim-select/slimselect.scss

[trymeouteh]

Here is my code so far. And what is strange is that --ss-bg-color will change the background color of an option and the font color of an selected option. Also .myOptionClass does not fully work as it only changes the font color of Option 2 when Option 2 is selected and will not change the background color at all.

<link rel="stylesheet" href="node_modules/slim-select/dist/slimselect.css">

<style>
    .mySelectClass {
        /* Options background and selected option font color */
        --ss-bg-color: green;

        /* Options font color */
        --ss-font-color: yellow;

        /* Selected options background */
        --ss-primary-color: lightgreen;
    }

    .myOptionClass {
        /* Options background and selected option font color */
        --ss-bg-color: red;
    }
</style>



<select id="mySelectElement" class="mySelectClass">
    <option>Option 1</option>
    <option class="myOptionClass">Option 2</option>
    <option>Option 3</option>
</select>



<script src="node_modules/slim-select/dist/slimselect.min.js"></script>

<script>
    new SlimSelect({
        select: '#mySelectElement'
    });
</script>

[brianvoe]

css variables overrides work a little different for css variables. You will need to wrap it in a :root {}. Below is an example I have of overriding variables.

@use 'node_modules/slim-select/src/slim-select/slimselect';

:root {
  // Colors
  --ss-primary-color: var(--color-primary);
  --ss-bg-color: var(--color-background);
  --ss-font-color: var(--color-font);
  --ss-font-placeholder-color: var(--color-placeholder);
  --ss-disabled-color: var(--color-disabled);
  --ss-border-color: var(--color-border);
  --ss-highlight-color: #fffb8c;
  --ss-success-color: var(--color-success);
  --ss-error-color: var(--color-error);

  // Heights
  --ss-main-height: 30px;
  --ss-content-height: 400px;

  // Spacing
  --ss-spacing-l: calc(var(--spacing) / 2);
  --ss-spacing-m: calc(var(--spacing-half) / 2);
  --ss-spacing-s: calc(var(--spacing-quarter) / 2);

  // Misc
  --ss-animation-timing: 0.2s;
  --ss-border-radius: var(--border-radius);
}

.ss-main {
  overflow: hidden;
  max-height: var(--ss-main-height);
}

[brianvoe]

and just to be clear I am overriding them with my own variables but you can set them to whatever you want.