使用HTML/JavaScript只需一個箭頭即可下拉/選擇框

Question

我需要創建一個佔用空間最小的下拉小部件 - 它周圍沒有框。只需點擊一個小箭頭即可激活它。這裏的視覺設計爲它：

注意所選擇的項目是如何顯示在大粗體字，而下拉列表應該是正常的文本。

任何想法，如果這樣的控制是可用的開源？我看着「Chosen」和「Select2」，都非常受歡迎，但他們周圍有完整的鍍鉻物，不知道如何輕鬆造型。任何想法歡迎。

Answer 1

我找不到任何符合我要求的現成控制。我終於寫了一個。它基於jQuery Widget Factory。它還沒有實現任何鍵盤交互或可訪問性，但這是一個開始。以下是github項目：https://github.com/archfirst/minimal-select。請隨意分叉和貢獻。

Answer 2

樣品小提琴：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。