Question

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

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

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

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

Answer 1

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

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

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

Answer 2

我为自定义Font项目（下拉列表）编写了这个，它非常易于使用，并且它有很多可以用它的应用程序。没有办法在选项级别执行您要求的操作（比如某种颜色）。这是链接，我希望它有用。

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

Common CSS

select option {
 background: red;
}

Answer 3

这可能是hackish但也许它与你正在寻找的类似。只是一个例子，你可以在没有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>

将下拉选项列表设置为具有背景图像的按钮。 HTML / CSS

3 个答案: