Select option стилизация?

Question

[Ланселот]

Здравствуйте. Подскажите пожалуйста, а можно ли между option увеличить отступы? padding и line-height не работают.

<select>
          <option class="catalog-filter-item__option">Выберите значение--</option>
                      <option class="catalog-filter-item__option">
              Лондон
            </option>
                      <option class="catalog-filter-item__option">Нью-Йорк
            </option>
                  </select>

select {
  font-size: 16px;
 line-height: 30px;
 padding: 10px;
}

.catalog-filter-item__option {
 font-size: 16px;
 line-height: 30px;
 padding: 10px;
}

Спасибо.

Answer 1

[Сергей delphinpro]

https://select2.org/

Answer 2

[Irkov]

День добрый. Стилизовать select крайне неблагодарная и трудоемкая задача. Большинство правил для option не подходят, в том чиле и padding, font-size и т.д. Если хотите красивый select, то проще его сделать через список и придать вид элемента select.

Comments

[Ланселот]

да но тогда на мобильной версии он будет ненастолько удобным

[Irkov]

Ланселот, на вряд ли. С этим элементом можно делать что хочешь, в том числе прописать его поведение на мобильном в css и js. С select проще будет - там этого делать не надо, так как его поведение изначально определено и прописано, а в случае со списком - прийдется делать это самому. Однако, кого это останавливало в погоне за красотой ))))))))))))))