Как изменить отступы у выпадающего списка?

Question

[Елена]

Я походу с ума сойду от этого выпадающего списка, почему до сих пор не сделают нормальную стилизацию, скачешь возле него как чекнутая. Если нельзя через css изменить отступы и цвет фона, а через jQuery это возможно, то получается и через javaScript можно изменить стили. Мне нельзя подключать библиотеку jQuery, да и сама считаю, что это уже немного устаревший метод, как мне изменить через JS отступы и фон у выпадающего списка?

<style>
option {
  padding: 5px 0;
}
</style>
<select>
    <option>Яблоко</option>
    <option>Груша</option>
</select>

Comments

[mletov]

Лучше скачайте какой-нибудь кастомный комбобокс.

[Сергей]

<option> внутри <select> невозможно стилизировать с помощью CSS, JS или JQuery (JQuery пересобирает ваш инпут обычными блоками и стилизирует)
Варианты: писать свой кастомный выпадающий список, а клики обрабатывать js'ом или подключать библиотеки.

[strelok011]

подтверждаю.
Все выпадающие элементы являются нативными реализациями, которые еще и в разных браузерах по разному ведут.
Если есть дизайн - то только верстка в html.
Можно написать на нативном js, можно найти готовый компонент без jquery. Суть едина :)

Answer 1

[Lord_Dantes]

как мне изменить через JS отступы и фон у выпадающего списка?

https://www.w3schools.com/js/js_htmldom_css.asp

А по факту это должно можно изменить не option (так как его нельзя изменять), а select - option в свою очередь возьмет часть стилей из select и будет в принципе нормальным.