Кастомизация select (choices.js)

Question

Пытаюсь стилизовать select через choices.js, не получается нормально заменить стрелку на кастомную, если и заменяю, то никак не позиционируется точно по центру элемента. Еще-как сделать, чтобы высота контейнера увеличивалась, когда select открывался?

const element = document.querySelector('.select');
const choices = new Choices(element, {
  searchEnabled: false,
  position: 'bottom',
  itemSelectText: ''
});

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  margin: 0 auto;
  max-width: 1170px;
  border-radius: 15px;
  background: #424242;
}

.choices {
  width: 100%;
  max-width: 176px;
  border-radius: 10px;
  border: 1px solid #CCB26E;
  font-size: 14px;
  line-height: 19px;
}

.choices__inner {
  border: 1px solid #CCB26E;
  border-radius: 10px;
}

.is-open .choices__inner {
  border: 1px solid #CCB26E;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.is-open .choices__list--dropdown {
  border: 1px solid #CCB26E;
  border-radius: 10px;
  background: #fff;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.choices__list--dropdown .choices__item--selectable {
  padding-right: 0;
}

.choices__list--dropdown .choices__item:hover {
  border: 1px solid #CCB26E;
  border-radius: 10px;
}

.choices[data-type*="select-one"]::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url('https://svgshare.com/i/Zw8.svg');
  background-repeat: no-repeat;
  background-position: right center;
  border-style: none;
  border-color: #333 transparent transparent;
  border-width: 0;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}

.choices[data-type*="select-one"].is-open::after {
  transform: rotate(180deg);
}

<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<section class="section ">
  <div class="container">
    <select class="select">
      <option value="Материал">Материал</option>
      <option value="Древесина">Древесина</option>
      <option value="Металл">Металл</option>
      <option value="Камень">Камень</option>
      <option value="Пластик">Пластик</option>
      <option value="Композитный">Композитный</option>
      <option value="Гипс">Гипс</option>
    </select>
  </div>
</section>

Answer 1

У select добавляется класс .choices, можно увидеть через devTools. Обращаемся к нему:

.choices[data-type*=select-one]:after {
          height: 8px;
          width: 8px;
          border-width: 0px;
          border-right: 1px solid #666666;
          border-top: 1px solid #666666;
          transform: rotate(135deg);
          margin-top: -6px;
        }
        
        .choices[data-type*=select-one].is-open:after {
          border-width: 0px;
          border-left: 1px solid #CCB26E;
          border-bottom: 1px solid #CCB26E;
          margin-top: -2px;
        }

БЛОГ НА HUSL

Кастомизация select (choices.js)

Ответы (1 шт):