前几天我读了 Anna Kaley 的 “列表框与下拉列表” 文章。这篇文章对选择选项的不同 UI 实现进行了相当直接的比较。其中有很多好的建议。像这样的经典建议是，如果你展示不超过五个选项，应该使用单选按钮（单选）或复选框（多选），随着选项数量的增加，应该使用不同的选项。
文章中没有谈论的是你如何实现这些东西。我猜想这多少是故意的，因为文章的重点是谈论用户体验，而不是技术。但是，你如何实现它们对用户体验有很大影响。在网页设计和开发圈子里，关于这些事物的讨论通常涉及你能否用原生控件来实现它们，或者是否需要从头开始重建它们。如果你能使用原生控件，你通常应该使用它们，因为你会得到很多免费的用户体验，这些用户体验可能会在重建时丢失或遗忘——比如如何通过键盘操作一切。
人们选择“重建”的原因通常是出于样式方面的考虑，但这随着时间的推移而逐渐改变。我们现在对单选按钮和复选框有 大量的控制权。我们可以 很好地对下拉菜单的外观进行样式化，并且可以通过技巧 甚至对其内部进行样式化。
但即使没有自定义样式，我们仍然有一些 UI 选项。如果你需要从许多选项中选择一个，我们有 <input type="radio"> 按钮，但就数据和最终结果而言，它与 <select> 相同。如果你需要选择多个选项，我们有 <input type="checkbox">，但就数据和最终结果而言，它与 <select multiple> 相同。
你根据可用的空间和正在构建的任何内容的用户体验进行选择。
我对此有一个问题。如果在桌面端有太多
<input type="checkbox" />，你可能希望将这些输入转换为移动端的<select>类型。有没有只用 CSS 就能实现的方法？我看到的实现方案总是依赖于 JavaScript。这是一个有趣的情况。我认为仅靠 CSS 无法实现。即使你用 CSS 切换表单 HTML 的不同部分的显示，这些表单元素仍然存在，并且可能会提交。至少使用 JavaScript，你可以从 DOM 中移除其他元素，或者更改它们的一些属性以防止它们提交并被辅助技术访问。但即使这样，你也要非常小心，确保表单提交的数据格式完全一致。
我能想到的解决方案之一是，让不需要显示的元素具有以下 CSS 属性
{
display: none,
/* 或者 */
opacity: 0,
width: 0,
height: 0
}
但是，如果你真的想根据设备删除一些 HTML 元素（而不是将其隐藏），那么你确实需要 JavaScript，因为 CSS 只能将样式应用于 HTML 元素，不能删除或添加它们。
我建议谨慎使用
<select multiple>，因为人们往往不知道如何在列表中选择多个项目（在桌面端），而中间没有选中的元素。在上面的示例中，这将选择“选项 1”和“选项 3”，但不选择“选项 2”。在移动端，当元素获得焦点时，它似乎呈现为复选框列表。
我完全同意这一点，并且倾向于避免使用
<select multiple>。即使用户知道如何选择多个项目，也很容易出错（不小心按下了 Shift 而不是 Ctrl，反之亦然）。此外，对于超出选择控件大小的列表，用户无法看到他们选择的全部内容，这很容易导致用户在不知情的情况下提交了错误的数据（对于编辑来说尤其如此）。有点像——正如链接的 NNG 文章所指出的那样
（我的强调）所以，是的，你得到的数据是一样的，但就“最终结果”而言，这取决于你如何定义它——它是否包含明显性的 UX 价值？