用于移动媒体查询的下拉列表css样式

Question

我试图为我的网站移动导航下拉列表设置样式，并且使用默认向下箭头看起来很无聊。我只是想知道如何将默认箭头替换为我创建的图形。

<select name="mobilenav" id="mobilenav" title="Select Destination">
<option selected>Select Destination</option>
<option>Philadelphia</option>
<option>United States of America</option>
<option>Destination</option>
<option>Long Destination Names</option>
<option>Australia</option>
</select>

此外，当我测试它并使用我的移动设备点按下拉菜单时，它会创建一个弹出菜单列表而不是下拉菜单。

对不起我的无知，并提前致谢！

Answer 1

默认选择元素可能因设备而异，IOS可能与android不同。您可能希望使用jQuery插件（例如http://gregfranko.com/jquery.selectBoxIt.js/（或找到您更喜欢的插件）来更改默认外观。我不是100％确定它是否适用于移动设备，但应该为桌面浏览器提供更多样式选项。

如果您不需要使用select元素，您也可以使用无序列表，根据自己的喜好设置样式，并使用jQuery在点击时扩展和收缩列表项...只是一个想法，不确定如果那是这种情况的选择。