11

如果我点击标签，我想打开选择按钮，

这是代码

<label>sachin</label>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

css或jquery有什么办法吗？我不确定这件事。

小提琴：http: //jsfiddle.net/Yh3Jf/

4

6 回答 6

18

这里不需要 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/

于 2015-09-20T11:45:36.667 回答
7

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

$("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/

于 2013-08-17T03:48:16.040 回答
3

你想做这样的事情吗？ 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);
    }
})
于 2013-03-06T14:49:46.377 回答
2

如果您只是想获得对选择框的关注（从而允许您向上和向下箭头），您可以使用类似...

<label for="sel">sachin</label>
<select id="sel">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
于 2013-03-06T14:32:34.367 回答
2

如果其他人正在搜索这个，我通过扩展标签的填充来完成这个行为<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上的工作示例

于 2021-01-31T22:51:59.777 回答
0

不幸的是，无法使用任何类型的代码来显示本机选择下拉菜单。

但是我看到人们使用背景图像然后弹出选择（检查 Mightydeals.com）

如果不解析到jquery和一些html来产生效果。

于 2013-03-06T14:32:17.517 回答