Vue Select Component Styling

Select Styling

Learn how to customize the Vue Select component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

CSS variables

A select takes its frame from the same --cui-control-* tokens as .form-control, declared on .form-select itself. class and style on <CFormSelect> land on that <select>. The arrow and the space it reserves have their own:

scss

$form-control-select-tokens: defaults(
  (
    --cui-control-select-bg-img: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
    --cui-control-select-bg-img-dark: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
    --cui-control-select-bg-size: 16px 12px,
    --cui-control-select-padding-end: calc(var(--cui-control-padding-x) * 3),
  ),
  $form-control-select-tokens
);

How to use CSS variables

<template>
  <CFormSelect :style="customVars" />
</template>

<script setup>
const customVars = {
  '--cui-control-select-bg-size': '18px 14px',
  '--cui-control-select-padding-end': '3rem',
}
</script>