bootstrap theme?

[wnunezc]

bootstrap theme?

[oliver681]

@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
  }
}

[wnunezc]

@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: ...

Thanks for the reply, and sorry for my delay, I'll take it into account, but I was expecting something working on all the features or inputs in which choices can be used... I have a form system in which Select2 doesn't fit well and I was thinking of using choice but I wanted it to also fit the bootstrap layout, in design issues such as size, spaces, etc.

[zoglo]

You should be able to add all: unset if you are dependent on a library like choices and then apply your own changes on top of that?

[arnelap]

I think version 11.2 will make this easier with custom properties.

Until then, this is my css for bootstrap 5

  .choices {
    margin-bottom: unset;
    min-width: 100px;
  }


  .choices[data-type*='select'] > .choices__inner {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: unset;
  background-clip: padding-box;
  border-width: var(--bs-border-width);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  min-height: fit-content;
  padding: 0;
}

.choices__list--multiple .choices__item {
  margin-top: 0;
  margin-bottom: 0;
  background-color: var(--bs-primary);
  border-width: var(--bs-border-width);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.choices__list--single { padding: unset;}
.choices[data-type*="select"] > .choices__inner {
  padding: .3rem .75rem;
}
.choices__input {
  margin-bottom: 0;
  padding: 0;
  background-color: unset;
}