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

Question

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

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

知道这样的控件是否在开源中可用？我查看了“Chosen”和“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;
   }

只需更改图像 URL。

Answer 2

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