Vue Select

Vue Select offers many APIs for customizing the look and feel from the component. You can use scoped slots, custom child components, or modify the built in SCSS variables.

Support for CSS variables (custom properties) is currently on the road map for those that

are not using sass in their projects.

# SCSS Variables

Variables are leveraged in as much of the component styles as possible. If you really want to dig into the SCSS, the files are located in src/scss. The variables listed below can be found at src/scss/global/_variables .

All variables are implemented with !default in order to make them easier to override in your application.

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

//  Global Component Variables
$vs-component-bg: none !default;
$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;

//  Deselect State
$vs-state-deselect-bg: #fb5858 !default;
$vs-state-deselect-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 !default;

//  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;

# Overriding Default Styles

Vue Select takes the approach of using selectors with a single level of specificity, while using classes that are very specific to Vue Select to avoid collisions with your app.

All classes within Vue Select use the vs__ prefix, and selectors are generally a single classname – unless there is a state being applied to the component.

In order to override a default property in your app, you should add one level of specificity. The easiest way to do this, is to add .v-select before the vs__* selector if you want to adjust all instances of Vue Select, or add your own classname if you just want to affect one.

<template>
  <div>
    <v-select
      class="style-chooser"
      placeholder="Choose a Styling Option"
      :options="['Components', 'CSS / Variables', 'Slots']"
    />
  </div>
</template>

<style>
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
  background: #dfe5fb;
  border: none;
  color: #394066;
  text-transform: lowercase;
  font-variant: small-caps;
}

.style-chooser .vs__clear,
.style-chooser .vs__open-indicator {
  fill: #394066;
}
</style>

By default, the dropdown transitions with a .15s cubic-bezier opacity fade in/out. The component uses the VueJS transition system. By default, the transition name is vs__fade. There's a couple ways to override or change this transition.

  1. Use the transition prop. Applying this prop will change the name of the animation classes and negate the default CSS. If you want to remove it entirely, you can set it to an empty string.

<v-select transition="" />
  1. You can also override the default CSS for the vs__fade transition. Again, if you wanted to eliminate the transition entirely:
.vs__fade-enter-active,
.vs__fade-leave-active {
    transition: none;
}

# Option Wrapping Strategy

When options in the dropdown are wider than the dropdown itself, there are three strategies available. The strategy can be set with the dropdownOptionWrap prop. This prop accepts one of three strings:

# wrap

Break options that are wider than the dropdown onto the next line. No horizontal scrollbar.

<v-select dropdown-option-wrap="wrap" />

# truncate

Truncate options that are wider than the dropdown using an ellipsis .... No horizontal scrollbar.

<v-select dropdown-option-wrap="truncate" />

# nowrap

Don't wrap or truncate options wider than the dropdown. Introduces horizontal scrollbar.

<v-select dropdown-option-wrap="nowrap" />

← Slots →