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


How to apply scrollbar for datalist?

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

如何对其应用滚动条?

我的网页代码:

<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>

而且当我双击文本框时,所有单词都显示出来。双击时如何隐藏显示的所有单词?

使用 Javascript 可以制作滚动条,您可以使用单击在焦点后在数据列表上显示项目。

不幸的是,你不能用 datalist 属性做太多事情。数据列表当前不支持任何 CSS 样式,并且特定的视觉特征特定于浏览器。某些浏览器可能会选择为长列表添加滚动条。

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