React Select Component Styling

Select Styling

Learn how to customize the React 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 — the <select> that style lands on. 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

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

return <CFormSelect style={customVars} />