1

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

它的目的是对列表视图进行排序，所以我希望选项菜单有一个排序图标，其中包含排序的文本

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

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

4

3 回答 3

1

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

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

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

于 2013-05-20T22:05:31.510 回答
0

这可能有点骇人听闻，但可能与您正在寻找的相似。只是一个例子，你可以在没有 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>
于 2013-05-20T22:41:06.610 回答
0

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

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

常见的 CSS

select option {
 background: red;
}
于 2013-05-20T21:28:59.160 回答