这里不需要JavaScript，只需使用CSS样式化并使用指针事件：

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

相对CSS为

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

下面是一个丑陋的小提琴样本：https://jsfiddle.net/1rofzz89/

错误的家伙;要获得本地选择列表，只需在鼠标下创建一个不可见的克隆：

$("label").mouseover(function(){
    var $this = $(this);
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function($ele){ return {
            position: 'absolute',
            left: $ele.offset().left,
            top: $ele.offset().top,
            width: $ele.outerWidth(),
            height: $ele.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
});

在IE10、Chrome 27和Firefox 22上测试
演示：http://jsfiddle.net/Yh3Jf/24/

你想做这样的事吗？http://jsfiddle.net/Yh3Jf/6/

<label id="l">sachin</label>
    <select id="s">
        <option>1</option>
        <option>2</option>        
        <option>3</option>
        <option>4</option>
   </select>  

$("#l").click(function () {
    var size = $('#s option').size();
    if (size != $("#s").prop('size')) {
        $("#s").prop('size', size);
    } else {
        $("#s").prop('size', 1);
    }
})

如果您只是想获得选择框上的焦点（从而允许您上下箭头），您可以使用类似于.

<label for="sel">sachin</label>
<select id="sel">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

如果其他人正在搜索这个，我通过扩展<select>标记的填充并使标签定位为绝对值来实现此行为。

<div class="field-select">
  <label class="field-select__label" for="selector">Clickable Label</label>
  <select class="field-select__input" id="selector" name="selector">
    <option value="val1">value 1 </option>
    </option><option value="val2">Value 2</option>
  </select>
</div>

.field-select {
  position: relative;
}

.field-select__label {
  position: absolute;
  pointer-events: none;
  top: 5px;
  left: 0;
}

.field-select__input {
  padding: 50px 50px 20px 10px;
}

检查codepen上的工作示例

不幸的是，它inst可能使用任何类型的代码有本机选择下拉显示。
但我见过人们使用背景图像，然后选择弹出（检查Mightydeals.com）
如果没有解析到jquery和一些html来产生效果。

有同样的问题，我的解决方案是在css与这一行的标签：指针事件：没有;它已经与位置：绝对的;