がモバイルブラウザでドロップダウンを表示しないようにする方法

Question

ドロップダウンではなくスクロール可能に表示される選択可能なリストを作成しようとしています。

以下のコードはpc /タブレットブラウザでは完全に機能しますが、携帯端末では代わりにドロップダウンが表示されます。

モバイルでドロップダウンの代わりにスクロールオプションを強制することはできますか？

<div > 
    <select name="events" id="events" data-role="none" size=25 style="width:27vw; height:50vh"> 
     <option>Option1</option> 
     <option>Option2</option> 
    </select> 
</div> 

は（問題を鑑賞するために、モバイルの開口部を試してみてください）問題を示しているfiddleを参照してください。

それを行うには良い方法がある場合は別の方法として、私は批判/提案を開いています、これはHTMLに私の最初のベンチャー企業である...

Answer 1

あなたの問題は、モバイルブラウザが<select>タグのsize属性を尊重していないということです。デスクトップブラウザでさえもhistorically had trouble with itです。

この属性に頼らずに、これについて実際には何もできません。このようなコントロールをJavaScriptで作成することは、特に難しいことではありません。 JavaScriptのバージョン（モバイル）を表示するか、<select>のバージョン（デスクトップ）を表示するかは、メディアクエリを使用して判断できます。

$('ul.select li').click(function(e){ 
 
    var item = $(e.target); 
 
    item.addClass('selected'); 
 
    item.siblings().removeClass('selected'); 
 
    $('#events').val(item.text()); 
 
});

ul.select { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 2px; 
 
    border: 1px solid grey; 
 
} 
 

 
ul.select li { 
 
    padding: 2px 6px; 
 
} 
 
ul.select li:hover { 
 
    cursor: pointer; 
 
} 
 
ul.select li.selected { 
 
    background-color: blue; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="events" type="hidden" name="events" value=""> 
 

 
<ul class="select"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul>

私はまた、携帯電話のブラウザが意図的にドロップダウンメニューに彼らがユーザーエクスペリエンスを向上させるために行う方法を表示することに注意します。私はそれを覆そうとする前に二度考えていた。

Answer 2

あなたがHTML要素に古典selectに変換pluginを使用する必要がありますselectをカスタマイズしてください。