Open arcanisgk opened 1 month ago
@arcanisgk If you want to style single selects with the bootstrap theme, you can use/adapt the following SCSS that we use in our project:
.choices[data-type*='select'] {
> .choices__inner {
@extend .form-select;
min-height: fit-content;
padding: 0;
> .choices__list--single {
padding: bs.$input-padding-y 16px bs.$input-padding-y bs.$input-padding-x;
}
}
// Bootstrap styles to highlight select element when focused
&.is-focused > .choices__inner {
border-color: bs.$form-select-focus-border-color;
outline: 0;
@if bs.$enable-shadows {
@include bs.box-shadow(bs.$form-select-box-shadow, bs.$form-select-focus-box-shadow);
} @else {
box-shadow: bs.$form-select-focus-box-shadow;
}
}
> .choices__list--dropdown {
@extend .dropdown-menu; // Bootstrap dropdown styles
--bs-dropdown-padding-y: 0;
}
&::after {
content: none; // remove Choices dropdown icon
}
}
bootstrap theme?