Skip to main content

CSS Variables

Simple Multiple Select uses CSS variables to allow you to customize the look and feel of the component. The following variables are available:

--simple-multi-select-font-size​

Font size to use for the component. The size of the component scales with the font size.

Default Value: 1rem

:root {
--simple-multi-select-font-size: 1rem;
}

--simple-multi-select-label-color​

Color of the title text for the select.

Default Value:

rgba(0, 0, 0, 0.75)

:root {
--simple-multi-select-label-color: rgba(0, 0, 0, 0.75);
}

--simple-multi-select-color​

Color of the option and selected options text.

Default Value:

#000000

:root {
  --simple-multi-select-color: #000000;
}

--simple-multi-select-border-radius​

Border radius of the component.

Default Value: 5px

:root {
  --simple-multi-select-border-radius: 5px;
}

--simple-multi-select-border-color​

Color of the border of the component.

Default Value:

#9a9a9a

:root {
  --simple-multi-select-border-color: #9a9a9a;
}

--simple-multi-select-bg-color​

Background color of the component.

Default Value:

#ffffff

:root {
  --simple-multi-select-bg-color: #ffffff;
}

--simple-multi-select-hover-border-color​

Color of the border of the component when hovered, or focused.

Default Value:

#9a9a9a

:root {
  --simple-multi-select-hover-border-color: #9a9a9a;
}

--simple-multi-select-hover-bg-color​

Background color of the component when hovered, or focused.

Default Value:

#ffffff

:root {
  --simple-multi-select-hover-bg-color: #ffffff;
}

--simple-multi-select-hover-box-shadow​

Box shadow applied to the component when hovered, or focused.

Default Value: 0 0 0 0.125rem

rgb(0 108 219 / 52%)

:root {
  --simple-multi-select-hover-box-shadow: 0 0 0 0.125rem #ff0000;
}

--simple-multi-select-option-color​

Text color of the options.

Default Value:

#000000

:root {
  --simple-multi-select-option-color: #000000;
}

--simple-multi-select-option-hover-color​

Text color of the options when hovered, or focused.

Default Value:

#000000

:root {
  --simple-multi-select-option-hover-color: #000000;
}

--simple-multi-select-option-bg-color​

Background color of the options.

Default Value:

#ffffff

:root {
  --simple-multi-select-option-bg-color: #ffffff;
}

--simple-multi-select-option-bg-hover-color​

Background color of the options when hovered, or focused.

Default Value:

#CDDAF5

:root {
  --simple-multi-select-option-bg-hover-color: #CDDAF5;
}

--simple-multi-select-option-disabled-color​

Color of the options when disabled.

Default Value:

#4b4b4b

:root {
  --simple-multi-select-option-disabled-color: #4b4b4b;
}

--simple-multi-select-option-disabled-bg-color​

Background color of the options when disabled.

Default Value:

#d9d9d9

:root {
  --simple-multi-select-option-disabled-bg-color: #d9d9d9;
}

--simple-multi-select-help-text-color​

Color of the help text.

Default Value:

#6c757d

:root {
  --simple-multi-select-help-text-color: #6c757d;
}