# Vue Select Component Styling

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

### CSS variables

A select takes its frame from the same `--cui-control-*` tokens as [`.form-control`](https://coreui.io/vue/docs/forms/input/styling/#css-variables), 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

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

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