使用 HTML/JavaScript 仅带有箭头的下拉/选择框答案

【问题标题】：Dropdown/Select Box with just an arrow using HTML/JavaScript使用 HTML/JavaScript 仅带有箭头的下拉/选择框
【发布时间】：2013-07-05 21:09:42
【问题描述】：

我需要创建一个占用空间最小的下拉小部件 - 周围没有框。只需单击一个小箭头即可激活它。这是它的视觉设计：

注意所选项目如何以粗体大字显示，而下拉列表应为普通文本。

知道这样的控件是否在开源中可用？我查看了“Chosen”和“Select2”，它们都非常受欢迎，但它们周围有完整的镀铬，不知道设计有多容易。欢迎任何想法。

【问题讨论】：

用一些javascript自己模拟一个选择框怎么样？

标签： jquery html-select drop-down-menu jquery-select2 jquery-chosen

【解决方案1】：

小提琴样例：http://jsfiddle.net/HNNRf/

HTML

<div class="styled-select">
    <select><option>Here is the first option</option><option>The second option</option></select>
</div>

CSS

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #fff;
   }

只需更改图片网址即可。

【讨论】：

很难完成这项工作。试过 font-size: 36px 和文本开始切断。改变 line-height 和 height 并没有多大帮助。此外，该设计要求右对齐文本 - 添加 text-align: right 没有帮助，并且在不同的浏览器上具有不同的行为。我有一种感觉，让一个跨浏览器看起来像这样的原生控件将是一个挑战。

【解决方案2】：

我找不到任何符合我要求的现成控件。我终于写了一篇。它基于 jQuery 小部件工厂。它还没有实现任何键盘交互或可访问性，但它是一个开始。这是 github 项目：https://github.com/archfirst/minimal-select。请随时 fork 和贡献。

【讨论】：