如何防止<select>显示在手机浏览器上的下拉菜单

我正在尝试创建一个显示为可滚动而不是下拉菜单的可选列表。如何防止<select>显示在手机浏览器上的下拉菜单

下面的代码在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 ...

来源

2017-06-12 OSKM

您的问题只是移动浏览器不尊重<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>

我还要指出，移动浏览器故意显示下拉式选单他们做改善用户体验的方式。在尝试颠覆之前，我会考虑三次。

来源

2017-06-12 09:57:53 Michael

也感谢解释为什么这是一个坏主意做我想做的事情。 – OSKM

您需要使用plugin它转换经典select到HTML元素根据需要自定义select。

来源

2017-06-12 09:30:03 David

感谢您的建议，但我认为其他答案是我想要的（我在决定之前都尝试过）。 – OSKM

如何防止<select>显示在手机浏览器上的下拉菜单

回答

相关问题