CSS Styling

Vs Vue3 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 CSS properties.

CSS Variables

Vs Vue3 Select uses custom CSS properties throughout the component to handle visual opinions. This allows for quite a bit of flexibility in styling, without having to hook into a build system for generating your own styles with something like SASS. If there is a value that you think should use a CSS property instead of a hardcoded CSS value, please submit a PR.

Dark Mode Example

Without writing any CSS yourself, you can completely customize the look and feel of Vs Vue3 Select through the use of CSS variables. In this example, we customize the colors of the component in a different style from the rest of the examples

In this case, the variables are scoped to only this implementation of the component, but you could place these variables anywhere in your applications CSS file to implement at a global level for your app.

Check the MDN docs for more info about CSS Custom Properties.open in new window

<template>
  <div class="demo">
    <v-select :options="countries" />
  </div>
</template>

<script setup>
import countries from '../data/countries.js'
</script>

<style scoped>
div {
  background: #282c34;
  padding: 1rem;
  border-radius: 0.3rem;
}

:deep(.demo) {
  --vs-controls-color: #664cc3;
  --vs-border-color: #664cc3;

  --vs-dropdown-bg: #282c34;
  --vs-dropdown-color: #cc99cd;
  --vs-dropdown-option-color: #cc99cd;

  --vs-selected-bg: #664cc3;
  --vs-selected-color: #eeeeee;

  --vs-search-input-color: #eeeeee;

  --vs-dropdown-option--active-bg: #664cc3;
  --vs-dropdown-option--active-color: #eeeeee;
}
</style>

In this documentation, the following styles have been added to implement the dark theme

html.dark{
  --vs-controls-color: #664cc3;

  --vs-border-color: #664cc3;

  --vs-dropdown-bg: #282c34;

  --vs-selected-bg: #664cc3;
  --vs-selected-color: #eeeeee;

  --vs-search-input-color: #eeeeee;

  --vs-dropdown-option--active-bg: #664cc3;
  --vs-dropdown-option--active-color: #eeeeee;

  --vs-open-indicator-color: #664cc3;

  --vs-state-disabled-bg: trasparent;
  --vs-state-disabled-color: #555;
}

Available CSS Variables

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

    /* Font */
    --vs-font-size: 1rem;
    --vs-line-height: 1.4;

    /* vs__dropdown-toggle */
    --vs-height: 36px;
    --vs-bg-color: inherit;

    /* Search Input */
    --vs-search-input-color: inherit;
    --vs-search-input-placeholder-color: inherit;

    /* State - No drop */
    --vs-state-no-drop-bg: inherit;
    --vs-state-no-drop-cursor: default;

    /* State - Disabled */
    --vs-state-disabled-bg: rgb(248, 248, 248);
    --vs-state-disabled-color: var(--vs-colors--light);
    --vs-state-disabled-controls-color: var(--vs-colors--light);
    --vs-state-disabled-cursor: not-allowed;

    /* Borders */
    --vs-border-color: var(--vs-colors--lightest);
    --vs-border-width: 1px;
    --vs-border-style: solid;
    --vs-border-radius: 4px;

    /* Actions: house the component controls */
    --vs-actions-padding: 0px 6px 0 3px;

    /* Component Controls: Clear, Open Indicator */
    --vs-open-indicator-color: var(--vs-colors--dark);
    --vs-controls-color: var(--vs-colors--light);
    --vs-controls-size: 1;
    --vs-controls--deselect-text-shadow: 0 1px 0 #fff;
    --vs-controls--spinner-size: 1;

    /* Selected */
    --vs-selected-bg: #f0f0f0;
    --vs-selected-color: var(--vs-colors--dark);
    --vs-selected-border-color: var(--vs-border-color);
    --vs-selected-border-style: var(--vs-border-style);
    --vs-selected-border-width: var(--vs-border-width);
    --vs-selected-options-padding: 2px 0 2px 10px;
    --vs-selected-options-gap: 2px;
    --vs-selected-multiple-padding: 0 0 0 4px;

    /* Dropdown Menu */
    --vs-dropdown-bg: #fff;
    --vs-dropdown-color: inherit;
    --vs-dropdown-z-index: 1000;
    --vs-dropdown-min-width: 160px;
    --vs-dropdown-max-height: 350px;
    --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
    --vs-dropdown-overflow-x: auto;
    --vs-dropdown-overflow-y: auto;
    --vs-dropdown-border-radius: 4px;
    --vs-dropdown-options-gap: 2px;
    --vs-dropdown-padding: 5px 0;

    /* Dropdown Option */
    --vs-dropdown-option-color: var(--vs-dropdown-color);
    --vs-dropdown-option-padding: 5px 15px;
    --vs-dropdown-option-margin: 0px 5px;
    --vs-dropdown-option-border-radius: var(--vs-border-radius);

    /* optgroup option */
    --vs-dropdown-optgroup-option-bg: #dfdfdf;
    --vs-dropdown-optgroup-option-padding: 5px;

    /* Option */
    --vs-dropdown-option--active-bg: #5897fb;
    --vs-dropdown-option--active-color: #fff;
    --vs-dropdown-option--selected-bg: #5897fb;
    --vs-dropdown-option--selected-color: #fff;

    /* Deselect State */
    --vs-dropdown-option--deselect-bg: #fb5858;
    --vs-dropdown-option--deselect-color: #fff;

    /* Transitions */
    --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
    --vs-transition-duration: 150ms;

}

Overriding Default Styles

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

Most classes within Vs Vue3 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 Vs Vue3 Select, or add your own classname if you just want to affect one.

<template>
  <v-select
    class="style-chooser"
    placeholder="Choose a Styling Option"
    :options="['Components', 'CSS / Variables', 'Slots']"
  />
</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 svg.vs__open-indicator > path,
.style-chooser .vs__clear svg > path {
  fill: #394066;
}

.dark .style-chooser .vs__search::placeholder,
.dark .style-chooser .vs__dropdown-toggle,
.dark .style-chooser .vs__dropdown-menu {
  background: #323232;
  color: #ffc66d;
}

.dark .style-chooser svg.vs__open-indicator > path,
.dark .style-chooser .vs__clear svg > path {
  fill: #629755;
}
</style>

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

Transition

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="" />

Override

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

CSS Variable

There are also two variables to control the animation

# CSS Styling

# CSS Variables

# Dark Mode Example

# Available CSS Variables

# Overriding Default Styles

# Dropdown Transition

# Transition

# Override

# CSS Variable