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

Posted 2023-03-06

【中文标题】如何仅使用 HTML 和 css 的选择标签在桌面浏览器中制作 ipad 之类的下拉列表，这可能吗？

【英文标题】：How to make ipad like dropdownlist in desktop browsers using select tag of HTML and css only, is it possible?

【发布时间】：2011-11-22 04:38:20

【问题描述】：

我正在做一个项目，我必须为选择框（下拉列表）赋予一些风格......这个页面几乎可以在所有设备上运行（响应式网页设计）我必须为选择框赋予风格像这样

在 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>

【问题讨论】：

你说"in iPad its working"。您是在谈论添加样式，还是默认 ios select 框有效？你能提供一个链接到它不工作的例子吗？

嗨，非常感谢您的回复，我正在谈论默认的 iOS 选择框...意味着在 ipad 中，获取上述样式没有问题，因为它的默认样式，但我希望选择框使用相同的样式一个桌面浏览器，我正在使用 标记为此我想只使用 css 给出上述样式

Jamna，没有办法用纯 CSS 改变选择元素的“内部”。 iOS 选择元素看起来像它的样子，因为对于 iOS， 是 的默认值。 Rc-ham 的链接都是完成您想要在桌面上执行的操作的可行方法，第一个链接最接近您想要的图形样式。

我认为，我们将无法为特定列指定样式，但我们可以为所有列指定样式

【参考方案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/

【参考方案2】：

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

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

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