如何仅使用 HTML 和 css 的 select 标签在桌面浏览器中制作类似 ipad 的下拉列表，可能吗？

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

我认为对于桌面上的大多数 A 级浏览器来说，仅使用 CSS 来更改选择框的默认样式是不可能的，但我可能是错的。您将必须使用 JavaScript 和 CSS 来获得您想要的东西。我确信有一些 jQuery 插件可以帮助您。以下是我发现的一些，我从未测试过这些，但希望它们能提供一些指导。

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/（已存档）

http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/（已存档）