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

Question

[andreyqin]

Есть вот такой выпадающий список - jsfiddle.net/29FTZ

Вопросы:
1) Как сделать, чтобы ширина опций была равна ширине стилизованного селекта?
2) Как убрать обводку вокруг всех опций?

Хотелось бы решить данные вопросы на чистом CSS, либо с минимальным внедрением JavaScript (jQuery).

Answer 1

[Никита]

посоветовали мне, посоветую и вам selectize.js

сам всегда был сторонником решения указанной задачи средствами css, но объективно - не тратьте время на подобные вещи, они решаются простеньким скриптом. Лучше за это время решите действительно интересную и сложную задачу

Comments

[rhost]

а селект с калиндариком есть ?)

Answer 2

[Maksim Zverev]

Вот один из вариантов без JS:
jsfiddle.net/29FTZ/3

PS: ранее отправил не верную ссылку.

Comments

[andreyqin]

Шутку оценил. Я сказал, что можно и с JS. Видимо проще будет сделать так: сверстать свой селект с атрибутами data-value, который будет синхронизироваться с таким же, только стандартным селектом, который будет скрыт.

[Maksim Zverev]

Простите, не нажал update прежде чем запросить новый линк :( jsfiddle.net/29FTZ/3 вот правильная ссылка.

[Maksim Zverev]

@andreyqin ссылку в ответе тоже поправил, если требуется убрать обводку с выпадающего списка то это только JS, но будет весьма громоздко.

[andreyqin]

@m1skam, спасибо. Все-таки для меня будет проще создать свой собственный селект.

[igor33]

помогло

Answer 3

[Станислав]

Только JS только хардкор.

Comments

[andreyqin]

Подскажите, как?

Answer 4

[Crash]

Ширину селекта нужно поставить 150px, как у внешнего дива, убрать border'ы

Comments

[andreyqin]

А вы пробовали? Ширина селекта ставится больше, чтобы скрыть стандартную кнопку. Бордеры тоже тут не помогут.

[Илья Лесных]

Ширина option`ов равняется ширине родительского select`а. Как вы представляете себе решить проблему ширины option`ов, не уменьшая ширину select`а?

[andreyqin]

@Aliance, если бы я знал как решить, я бы не задавал тут вопросов. Если уменьшать ширину селекта, то у него становится видна стандартная кнопка.

[Илья Лесных]

Ну как костыль - попробуйте увеличить высоту, чтобы стрелочка вылезала за пределы дива.

[andreyqin]

@Aliance, если вам не сложно, можете продемонстрировать это на моем примере?

Answer 5

[pauletik]

kate-land.net/html-css/item/336-cross-browser-styl...

Comments

[pvasili]

кривое решение при длинном тексте в селекте