如何为数据列表应用滚动条？答案

【问题标题】：How to apply scrollbar for datalist?如何为数据列表应用滚动条？
【发布时间】：2013-10-10 05:09:03
【问题描述】：

我有一个用于自动完成的数据列表。

如何应用滚动条？

我的 HTML 代码：

<input list="languages" id="language_id" />
<datalist id="languages" style="visibility:hidden;white-space:nowrap;overflow:scroll;">
  <option value="html">HTML</option>
  <option value="java">Java</option>
  <option value="perl">Perl</option>
  <option value="php">PHP</option>
  <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

当我双击文本框时，所有的单词都会显示。双击时如何隐藏所有显示的文字？

【问题讨论】：

设置height和width和visibility:visible
Scroll bar for Datalist in HTML5的可能重复

标签： php css html

【解决方案1】：

用Javascript可以制作滚动条，焦点后可以单击在datalist上显示项目。

【讨论】：

【解决方案2】：

不幸的是，您对 datalist 属性无能为力。 datalist 目前不支持任何 CSS 样式，并且特定的视觉特征是特定于浏览器的。一些浏览器可能会选择为长列表添加滚动条。

如果这不可接受，您可能不得不忘记数据列表并通过 Javascript 实现 ComboBox。我相信 JQuery 有一个可能合适的自动完成功能。

【讨论】：