将下拉选项列表样式化，使其看起来像带有背景图像的按钮。 HTML/CSS答案

【问题标题】：Styling a drop down option list to look like a button with background image. HTML/CSS将下拉选项列表样式化，使其看起来像带有背景图像的按钮。 HTML/CSS
【发布时间】：2013-05-21 06:41:06
【问题描述】：

我正在创建一个移动网站，我想将一个简单的下拉列表设置为看起来像一个按钮。我希望它在按钮中有一个背景图片。

它的目的是对列表视图进行排序，所以我希望选项菜单有一个排序图标，上面有排序的文字

<select>
  <option>ASC</option>
  <option>DESC</option>
  <option>Price</option>
</select>

这可能吗？我已经看到它在 jQuery Mobile 上使用过，但我们没有使用这个框架，只是纯 html/css。

【问题讨论】：

你看过 jQueryUI 吗？有些控件可能已经为您执行此操作。看看Buttons、Menu 和Autocomplete 的一些演示。

标签： javascript jquery html css

【解决方案1】：

有很多方法可以做到这一点，但都需要一些 JavaScript。

最简单的是使用this technique，它基本上将选择元素设置为透明并将其定位在您的自定义“按钮”元素上。当您单击按钮时，您实际上是在单击透明选择元素，这会导致它打开。

其他最复杂/最强大的解决方案包括：

【讨论】：

【解决方案2】：

我为一个自定义字体项目（下拉菜单）编写了这个，它非常易于使用，并且有很多应用程序可供您使用。无法在选项级别执行您要求的操作（例如某些颜色）。这是链接，希望对你有帮助。

http://jsfiddle.net/cornelas/mAz3c/

通用 CSS

select option {
 background: red;
}

【讨论】：

【解决方案3】：

这可能有点骇人听闻，但可能与您要查找的内容相似。只是一个例子，你可以在没有 JS 的情况下做一个下拉，它的例子很多。

但你可以在“li”标签中添加任何你需要的东西并适当地设置它们的样式。

当然，通过定位，你需要能够知道你的东西需要去哪里，如果你想在不同的视口中灵活地寻找东西，这可能会很痛苦。

造型显然也需要工作。

http://jsfiddle.net/uNhaX/

<ul>
    <li id="first"><img src="http://jsfiddle.net/img/logo.png" /><ul id="second">
        <li id="asc">Asc</li>
        <li id="desc">Desc</li>
        </ul>
    </li>
</ul>

【讨论】：