@ravlex

Как стилизовать option select?

Не получается применить шрифт и бордер к option. Почему и как это исправить?
.sortvibor {
  float: left;
  margin-top: 10px;
  font-family: 'PT Sans Narrow 400';
  line-height: 20px;
  position: relative;
}
.sortvibor span {
  font-size: 18px;
  color: #000;
}
.sortvibor form {
  display: inline-block;
  padding-left: 5px;
}
.sortvibor select {
  font-family: 'PT Sans Narrow 400';
  line-height: 20px;
  color: #000;
  font-size: 14px;
  min-width: 155px;
  padding: 2px 50px 2px 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background-color: transparent;
  text-decoration: underline;
  outline: none;
  border: 1px solid #467797;
}
.sortvibor option:checked {
  display: none;
}
.sortvibor option:not(:checked) {
  color: #467797;
}
.sortvibor option {
  border: 1px solid #467797;
}
.sortvibor .strelka {
  position: absolute;
  right: 10px;
  top: 4px;
  z-index: -9999;
}

<div class="sortvibor">
  <span>Сортировать:</span>
  <form action="">
    <select name="sort" id="sort">
      <option selected value="">Дешевле</option>
      <option value="">Дороже</option>
    </select>
  </form>
  <span class="strelka">&#9660;</span>
</div>

Нужно чтобы шрифт и бордер был таким же, как и у всего select.
  • Вопрос задан
  • 2315 просмотров
Пригласить эксперта
Ответы на вопрос 2
@maxnrg33
верстальщик
выпадающий список нельзя стилизовать

пользуйтесь плагинами. один из них:
https://select2.github.io/examples.html
Ответ написан
Комментировать
@alexmixaylov
как написал maxnrg33 это в принципе невозможно
плагины в данном случае преобразуют селект с опшнами в Блоки
и блоки стилизуются уже

но прежде чем делать это, подумайте хорошо, нужно ли вам это
для десктопной версии все ок, но в мобильной версии нативный селект может выигрывать
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы