list属性必须搭配同id的datalist元素使用，仅设list无效；option仅value生效，label仅影响显示；仅支持部分input类型，无键盘导航且样式不可控，宜作渐进增强而非主交互方案。
list 属性必须搭配 datalist 元素使用
单独写 list="xxx" 没用，浏览器不会自动创建选项列表。必须同时定义一个 <datalist id="xxx"></datalist>，且 id 与 list 值严格匹配（区分大小写、不可含空格）。常见错误是只写了属性没写 datalist，或者 id 拼错、多出空格，导致下拉完全不出现。
示例正确写法：
<input type="text" list="browsers"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option></datalist>
option 的 value 是唯一生效字段
datalist 中的 <option></option> 只有 value 属性会被用于匹配和填充输入框，label 属性仅影响下拉菜单中显示的文本（部分浏览器支持），而子文本内容（如 <option>Chrome</option>）在现代浏览器中已被忽略——它不会作为候选值，也不会 fallback 显示。
- ✅ 正确：
<option value="Edge"></option> - ❌ 无效：
<option>Edge</option>（无value，不参与匹配） - ⚠️ 注意：
<option value="IE" label="Internet Explorer"></option>中label仅可能改变下拉项显示文字，不影响实际输入值
不支持所有 input 类型，且无原生键盘导航支持
list 属性仅对 type="text"、"search"、"tel"、"url"、"email"、"number" 等可编辑类型有效；type="date"、"checkbox"、"radio" 等不支持。更重要的是：这个下拉没有键盘焦点管理，↑/↓ 无法选中选项，Enter 不会确认，用户只能靠鼠标点击或手动输入触发匹配。
这意味着它不是真正的“下拉选择控件”，而是轻量级输入建议，不适合需要强交互或无障碍要求的场景。
样式控制极其有限，无法用 CSS 定制下拉面板
浏览器对 datalist 渲染的下拉菜单几乎不暴露 CSS 接口。你不能修改它的位置、宽度、背景色、字体，甚至无法用 :focus-within 或伪元素定位它。部分浏览器（如 Chrome）允许用 option 的 color 或 background 改变单个选项样式，但兼容性差且效果不稳定。
如果项目需要定制化下拉体验（比如带图标、分组、搜索高亮），必须放弃 list+datalist，改用 JavaScript 实现的下拉组件（如 select2、Choices.js 或自研 autocomplete）。
真正能靠得住的，是把 list 当作渐进增强手段：先确保输入功能可用，再用 JS 补充交互和样式——而不是把它当成交互主干来依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
