C# 在列表项目之间添加空格，或使项目更易于在ASP.NET dropdownlist的触摸屏上选择

当开发一个以移动设备（主要是平板电脑）为目标的ASP.NET web应用程序时，我注意到，如果用户手指肥胖，或者触摸屏不太好，下拉列表有时很难让用户选择正确的项目

我知道我并不是唯一一个注意到这一点的人，因为IOS应用程序正是因为这个原因而不再使用下拉菜单，而是通常使用看起来像一卷卫生纸的UIPickerView控件，但让人们更容易通过滚动从列表中选择一个项目

因此，我正在ASP.NET中寻找一种好方法，不用滚动我自己的自定义控件，使dropdownlist更易于在移动设备上使用，或者寻找一些可以用来代替dropdownlist的免费控件

首先想到的是；我是否可以将列表中的项目隔得更远，这样人们就可以更容易地选择他们想要的项目？我试着把字体改大一些，但这并没有真正的帮助；特别是因为控件必须更宽，而问题实际上是项目之间的垂直空间有多大

如果没有，是否有人对他们如何解决这一问题有任何建议或现实例子

任何建议都将不胜感激

我成功地在通过的项目中使用了。它克服了样式选择选项的不足，并通过CSS提供了更多的样式控制

评论后更新：

DropKick.js页面上呈现的HTML选择字段。您所需要做的就是提供dropkick将渲染的选择字段转换为其实现所需的适当挂钩

从dropkicks的主页：

如何使用

DropKick的工作原理是将您现有的、枯燥的 漂亮、可定制的HTML下拉列表。name属性是唯一的属性 需要的人。您还应该将tabindex属性设置为 通过选项卡启用导航

<select name="pretty" tabindex="1" class="pretty dk">
  <option value="">Choose a reaction</option>
  <option value="amazed">Amazed</option>
  <option value="bored">Bored</option>
  <option value="surprised">Surprised</option>
</select>

如何在asp.net中使用它 非常简单，您可以下载js文件并将其包含在您的站点中：

并包括样式的css文件：

就快到了……现在需要使用jquery将其添加到页面的下拉列表中，大意如下：

$'myDropDown'.dropkick

或

---

$'.myDropDown'.dropkick

您始终可以使用CSS。如果你想喜欢JS，你甚至可以根据浏览器的用户代理桌面和移动服务提供不同的样式表

/* Drop down control itself */
select.ddlList {
    padding: 5px; /* padding between the border of the drop down and the items */
}
/* Drop down list items */
select.ddlList > option {
    padding: 15px 5px; /* 15px = top/bottom padding, 5px = left/right padding */
}

使用ASP.NET控件

<asp:DropDownList ID="ddl" CssClass="ddlList" runat="server">
    <asp:ListItem ... />
    <asp:ListItem ... />
</asp:DropDownList>

---

编辑：嗯，Xander是对的，你不能通过CSS设置选项的样式，但我的DropDownList样式设置示例仍然有效。这将使您的DropDownList对触摸客户端更加可见

看起来很有希望，但是如何将其与ASP.NET结合使用呢？我的意思是，我需要能够从我的ASP.NET代码中填充下拉列表，我还需要能够在我的ASP.NET代码中看到所选值，我想后者可以通过使用javascript在隐藏字段中填充所选值来实现。@Jim这只是一个js文件，您可以将其包含在ASP.NET页面中，然后将name属性添加到下拉框中。非常好+1。@john对。不过，在aspnet webforms中，name属性通常与dropdownlist的id server属性相同。尽管如此，这是一个想法。关于这方面的一些建议…在你使用它之前，先了解它所带来的后果。您再也不能轻松地键入字母以直接进入下拉列表项。图书馆不允许这样做。所以，如果您有一个包含三个项目的下拉列表，即蓝色、蓝色、条形，并且在标准asp.net下拉列表框中，您可以开始键入ba，它会将您带到条形。但是如果你实现了这个js解决方案，你就不能再这么做了。如果你处理的是小列表，情况还不错，但是如果你有用户列表，并且有很多用户，那么没有人会喜欢这个解决方案。将此标记为已接受，因为它确实很好地解决了我的问题，并且没有其他人提供了如何解决此问题的任何示例。