1

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

谷歌选择框

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

4

3 回答 3

4

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

首先，创建你的 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，因此当用户选择月份时，您将提取该值。

重要提示：这只是一个想法，我做过类似的事情，但我没有给你一个完整的解决方案，你可以随意改变/修改甚至放弃这个想法，但这就是我的处理方式。

于 2012-11-06T06:35:59.500 回答
2

尝试选择插件。尽管它看起来与您展示的不完全一样，但它确实有许多值得研究的功能

于 2012-11-06T07:08:41.797 回答
0

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

于 2012-11-06T07:11:07.113 回答