使用HTML / JavaScript只使用箭头下拉/选择框

Question

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

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

有任何想法是否可以在开源中使用这样的控件？我看了“选择”和“Select2”，两者都非常受欢迎，但是它们周围都有完整的镀铬，不知道风格多么容易。欢迎任何想法。

Answer 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;
   }

只需更改图片网址。

Answer 2

我找不到任何符合我要求的现成控件。我终于写了一篇。它基于jQuery Widget Factory。它尚未实现任何键盘交互或可访问性，但它是一个开始。这是github项目：https://github.com/archfirst/minimal-select。请随意分叉并做出贡献。