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 に答える
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 に答える
0

残念ながら、任意の種類のコードを使用して、ネイティブの選択ドロップダウンを表示することができます。

しかし、人々が背景画像を使用すると、選択がポップアップするのを見てきました (Mightydeals.com を確認してください)。

jquery といくつかの html に解決されない場合は、効果を生み出します。

于 2013-03-06T14:32:17.517 に答える