От чего зависит внешний вид option?

357
06 октября 2017, 16:48

Для контейнера select в CSS указано:

select {
font-family: "PT Mono";
font-size: 18px;
padding: 0 6px;
height: 36px;
}

К первому (видимому) option применяются все правила.

А вот к остальным:

В Opera (версия 48.0.2685.35; рис. 1) применяется font-family, font-size и padding (правда, только горизонтальный, вертикальный, как оказалось, — нет).

В Firefox (версия 56.0; рис. 2) — ничего.

От чего зависит такое поведение (и, как следствие, внешний вид) option и можно ли на это повлиять средствами CSS?

Answer 1

От чего зависит такое поведение (и, как следствие, внешний вид) option и можно ли на это повлиять средствами CSS?

Если смотреть на стандарты то - нет. Option рисуется часто средствами ОС и вы не можете никак на это повлиять. Если углубляться в детали, то на текущий момент браузеры по немногу отказываются от ОС спецефичных UI элементов, а другие хитро настраивают и по немногу появляется возможность стилизовать средствами css, но часто очень ограниченно.

Именно по этому уже давно, если вам что то нужно серьёзное от "select" то делаете его сами, а option становятся просто элементами списка в вашем диве. Но увы такое без JS проделать трудно, но есть и готовые решения.

READ ALSO
datapicker на мобильной версии

datapicker на мобильной версии

при разрешении 615х862 и ниже datepicker полностью рушится все дни просто идут в один столбец, как сделать что бы на мобильных устройствах вызывался...

327
Не подключается шрифт к SVG фигуре

Не подключается шрифт к SVG фигуре

Прописываю фигуру через img путь к svg файлуВ нём прописан стиль и путь шрифта, однако шрифт всё равно остаётся дефолтным

296
Едет верстка на iphone

Едет верстка на iphone

Сверстал лендинг, ссылка на rghost

378
Можно ли сделать такого вида кнопку?

Можно ли сделать такого вида кнопку?

Можно ли инструментами react-a и css сделать подобную кнопку, используя RaisedButton из material-ui?

233