Как сделать ipad наподобие выпадающего списка в настольных браузерах, используя только тег select из HTML и css, это возможно?

Question

Я работаю над проектом, в котором мне нужно придать какой-то стиль блоку выбора (выпадающий список) .... эта страница будет работать почти на всех устройствах (адаптивный веб-дизайн). Мне нужно придать стиль блоку выбора. как это

В ipad он работает, но для настольной версии, как я могу добиться того же стиля для окна выбора, используя только CSS? Для этого я использую HTML-тег выбора <select> ......</select>.

Я хочу использовать эту разметку

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 1

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

Однако их довольно легко изменить на то, что вы хотите:

http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/ - Особенно этот.

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 2

Я не думаю, что возможно изменить стиль по умолчанию для поля выбора только с помощью одного CSS для большинства браузеров класса А на рабочем столе, но я могу ошибаться. Вам нужно будет использовать JavaScript и CSS, чтобы получить то, что вы хотите. Я уверен, что есть несколько плагинов jQuery, которые могут вам помочь. Вот некоторые из них, которые я нашел, я никогда не проверял их, но, надеюсь, они дают некоторые рекомендации.

http://www.bulgaria -web-developers.com / projects / javascript / selectbox / (в архиве)

http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/ (в архиве)