选择类似于Google上显示的框？

Question

我想创建一个类似于下面Google上的<select>框：

我在正确设计风格方面遇到了很多麻烦。有人知道插件或解决方案吗？

Answer 1

我不知道插件，但我可以为您自己创建的插件提供解决方案：

首先，创建HTML，类似这样的

<div class="customDropdown">Month<span><img src="littlearrows.jpg" /></span></div>
<div id="customList">
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>...etc.</li>
    </ul>
</div>

然后你使用CSS设置div的样式，按照你想要的方式设置customDropdown，同时隐藏customList，也可能确保它只显示4行，右边有一个滚动条（无论是自定义还是brwozer，你的选择）。

之后，创建jQuery或Javascript代码，在其中添加列表的行为。您可能需要为每个月输入一个ID，因此当用户选择月份时，您将提取该值。

重要提示：这只是一个想法，我已经做了类似的事情，但我没有给你一个完整的解决方案，你可以改变/修改甚至丢弃这个想法但是你喜欢，但这就是我的方式会接近它。

Answer 2

试试Chosen plugin。虽然它看起来与您展示的不完全相同，但它确实有许多值得研究的功能

Answer 3

他们的风格没有任何Google公开发布。复制它并不容易，因为不仅需要css，还需要javascript。例如，创建花哨的ui元素有许多替代方法，例如Foundation。