Vue-select: Unable to set background color

[colinbes]

I am battling with setting background color of v-select. My page has a slight off-white color and I want the select background to be white but it appears to have default of background none.

If I add style in chrome's devtools to .v-select .dropdown-toggle then the background color changes, but when I add to style sheet it doesn't change.

.v-select .dropdown-toggle { //doesn't work
    background-color: #fff!important;
}

If I apply style to just .v-select in css file then it does work

.v-select { //does work but messes up corner radius background which makes sense, but shows styles are applied and working.
    background: #f00!important;
}

What gives, what am I missing?

[sagalbot]

Are you using SCSS in your build? I just released version 3.0 that has support for sass variables to customize various parts of the component. I'm planning on adding support for CSS properties in 3.1 for those that aren't using a build tool as well.

[colinbes]

I am using less and less-loader but will take a look at version 3.0. Note that setting background for .v-select does work but I guess that's because it's at higher level than the dropdown components.

[colinbes]

I am happy to try different options - I have updated to 3.0 and am willing to install different loaders, I haven't seen list of sass variables but will look later.

[sagalbot]

I'm working for the documentation on the SCSS variables, but for now, here there are in a raw format:

$vs-colors: (
        lightest: rgba(60, 60, 60, 0.26),
        light: rgba(60, 60, 60, 0.5),
        dark: #333,
        darkest: rgba(0, 0, 0, .15),
) !default;

//  Global Component Variables
$vs-component-line-height: 1.4 !default;
$vs-component-placeholder-color: inherit !default;

//  Active State
$vs-state-active-bg: #5897fb !default;
$vs-state-active-color: #fff !default;

//  Disabled State
$vs-state-disabled-bg: rgb(248, 248, 248) !default;
$vs-state-disabled-color: map_get($vs-colors, 'light') !default;
$vs-state-disabled-controls-color: map_get($vs-colors, 'light') !default;
$vs-state-disabled-cursor: not-allowed !default;

//  Borders
$vs-border-width: 1px !default;
$vs-border-style: solid !default;
$vs-border-radius: 4px !default;
$vs-border-color: map_get($vs-colors, 'lightest') !default;

//  Component Controls: Clear, Open Indicator
$vs-controls-color: map_get($vs-colors, 'light') !default;
$vs-controls-size: 1 !default;
$vs-controls-deselect-text-shadow: 0 1px 0 #fff;

//  Selected
$vs-selected-bg: #f0f0f0 !default;
$vs-selected-border-color: $vs-border-color !default;
$vs-selected-border-style: $vs-border-style !default;
$vs-selected-border-width: $vs-border-width !default;

//  Dropdown
$vs-dropdown-z-index: 1000 !default;
$vs-dropdown-min-width: 160px !default;
$vs-dropdown-max-height: 350px !default;
$vs-dropdown-box-shadow: 0px 3px 6px 0px map_get($vs-colors, 'darkest') !default;
$vs-dropdown-bg: #fff !default;

I just noticed this line:

.vs__dropdown-toggle {
  appearance: none;
  display: flex;
  padding: 0 0 4px 0;
  background: none;
  border: $border-width $border-style $border-color;
  border-radius: $border-radius;
  white-space: normal;
}

Looks like background:none; made it's way into v3. I'll get an update pushed for that.

[colinbes]

After upgrading to 3.0 and looking deeper I thought of trying to use non-scoped style as opposed to scoped style that I could override using non-scoped styles.

[sagalbot]

Ah right, that was probably the source of the original issue. In v3, you can add one more level of specificity to override any of the defaults ex: .v-select .vs__dropdown-toggle.

[colinbes]

Yeah,I think so. You splitting css file out of component is what triggered the thought. I have used .v-select .vs__dropdown-toggle to specifically specify dropdown - it's working well. Will keep watching this project, thanks for prompt responses!

[sagalbot]

Awesome, glad to hear it!

[cvakodobro]

Hi,

I am using latest version and I want to change height of v-select. I've added css, but nothing happens, it doesn't override or add anything to .vs__dropdown-toggle css. Can you please help me?

Part of css that does nothing:
.v-select .vs__dropdown-toggle{ height: 42px; }

[JStrebeyko]

Hi there,

I actually bumped against the same problem - no matter how much specificity level I added, I was unable to overwrite the default v-select styling. What helped me were vue-loader's deep selectors like /deep/, applying them to my selectors helped me to alter the colors. Hope it helps someone lost. Cheers! :beers: