如何使用CSS隐藏datalist的选项？（不修改HTML）

针对你给出的代码，有几种无需修改HTML就能隐藏datalist下拉选项的CSS方案，这里给你最实用的两种：

方案1：直接隐藏整个datalist元素 #

这是兼容性最好、实现最简单的方法，直接让浏览器不渲染整个datalist，关联的input点击后就不会弹出下拉选项：

#browsers {
  display: none;
}

设置后input依然可以正常输入内容，只是不会再触发datalist的下拉提示。

方案2：隐藏datalist内的所有选项 #

如果你不想完全隐藏datalist元素，仅需隐藏里面的选项，可以针对option标签设置样式：

#browsers option {
  display: none;
}

不过要注意，部分浏览器对原生datalist的option样式支持有限，这种方法的兼容性略逊于第一种，更推荐优先使用方案1。

两种方法都不会破坏input的正常输入功能，完全满足你“不修改HTML”的需求。

内容的提问来源于stack exchange，提问作者Kerrick