我的网站上有一个可用的下拉菜单,但它在 iPhone 和 iPad 上根本不起作用。 是否有一种可管理的方法来强制 iPhone/iPad 使用其 native 菜单选择器?
http://jsfiddle.net/craigzilla/6nZ5Q/
HTML:
<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
<div class="dropdown-text" id="dropdown_colours">Colours</div>
<ul class="dropdown-content" id="dropdown_colours">
<li><a href="../black.html" target="_self">Black</a>
</li>
<li><a href="../grey.html" target="_self">Grey</a>
</li>
<li><a href="../red.html" target="_self">Red</a>
</li>
<li><a href="../blue.html" target="_self">Blue</a>
</li>
<li><a href="../green.html" target="_self">Green</a>
</li>
<li><a href="../purple.html" target="_self">Purple</a>
</li>
</ul>
</div>
最佳答案
我在考虑 CSS 属性 -webkit-appearance
,但是没有任何值可以强制选择框出现 AFAIK(如果有的话,webkit 怎么知道它应该将 li
视为 option
?)
您必须使用 select
标签而不是无序列表来使 iOS 的 Webkit 自动将其外观更改为 native 外观。
您可以检测用户何时使用移动浏览器,并动态加载您的菜单。
如果您不想更改 HTML 标记,您也可以尝试使用 CSS 重现 native 选择框...
参见 Apple 的 documentation供引用。
关于html - iPhone 和 iPad 上的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17542502/