html - 如何使用 CSS 隐藏数据列表的选项

标签 html css html-datalist

给定以下代码:

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

呈现以下 UI:

input box with dropdown suggestions

可以添加哪些 CSS 而不更改 HTML不使用 JavaScript 来删除自动完成的元素,使其表现得像无数据列表的输入?

需要以下用户界面:

input box without dropdown suggestions

最佳答案

它不能用 css 解决,但请尝试在您的输入中使用 autocomplete="off"

关于html - 如何使用 CSS 隐藏数据列表的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49660072/

相关文章:

javascript - 使用变量作为类名并编辑它

html - 用 CSS 限制形状的边框

javascript - 如何在当前光滑元素下方添加插入符号?

html - 在 chrome 中使用 datalist 的 HTML5 &lt;input&gt; 标签溢出

jQuery : Set value of datalist?

css - 使用 css 的导航栏边框问题

html - 如何使隐藏链接对屏幕阅读器可见而不是标签导航

css - 表中的 jQuery UI 选项卡偏移其他单元格中的内容?

css - 如何处理 CSS 中水平不均匀的导航?

javascript - KnockoutJS - 将输入值链接到数据列表值