Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.25k stars 616 forks source link

bootstrap theme? #1215

Open arcanisgk opened 1 month ago

arcanisgk commented 1 month ago

bootstrap theme?

oliver681 commented 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
  }
}