原生 datalist 无法用 CSS 样式化，其下拉列表由浏览器控制，仅 input 元素可样式化；需自定义样式时必须用 JavaScript 模拟下拉补全。
input[list] 必须搭配 datalist，且不能用 class 或 id 选择器直接样式化
浏览器对 <datalist> 的渲染完全由 UA 控制，list 属性只是建立 input 与 datalist 的关联，不产生任何可选 DOM 节点供 CSS 选中。你写 <input list="mylist"><datalist id="mylist">...</datalist>，但 <option> 元素在下拉时不会出现在页面 DOM 树中（或仅以 shadow DOM 形式存在），所以 select#mylist option、datelist#mylist 这类选择器全部无效。
常见错误现象：
– 给 <datalist> 加 style="color:red" 没反应
– 用 option:not(:checked) 试图隐藏非匹配项，完全不生效
– 以为加了 class="autocomplete-list" 就能用 CSS 定制下拉框样式，结果毫无变化
真正可控的只有 input 本身 + JavaScript 模拟下拉补全
想实现带样式的输入联想，必须放弃原生 datalist 的“黑盒下拉”，改用 <input> + <div class="suggestions"> + JS 监听 input 事件手动控制显隐和高亮。
- 监听
input.addEventListener('input', handler)，而非change—— 后者只在失焦时触发，无法实时响应 - 用
input.value做前缀匹配（注意大小写：通常用str.toLowerCase().includes(input.value.toLowerCase())） - 把匹配项渲染进
<div class="suggestions">，每个选项用<div role="option" data-value="xxx">，避免用<button>（会触发默认表单提交） - 键盘导航需手动处理
ArrowDown/ArrowUp/Enter事件，维护一个activeIndex状态
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('input', () => {
const value = input.value.trim();
const matches = options.filter(opt => opt.toLowerCase().startsWith(value.toLowerCase()));
renderSuggestions(matches);
suggestionsContainer.style.display = matches.length ? 'block' : 'none';
});
Chrome / Edge 支持 ::webkit-list-box，但仅限极简覆盖
Chrome 和 Edge（基于 Chromium）提供实验性伪元素 ::webkit-list-box，但它只能作用于整个下拉容器，且仅支持极少数样式属性：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 仅允许设置
font、color、background、border（部分版本）、padding（极有限） -
display、width、max-height、transform全部被忽略 - 无法单独选中某一项，
::webkit-list-box option不合法 - Firefox 和 Safari 完全不支持该伪元素
所以即使加了：
input[list]::-webkit-list-box {
background: #fff;
color: #333;
font-size: 14px;
}
效果也极其有限，且不具备跨浏览器意义。
兼容性与体验取舍：何时坚持用原生 datalist？
原生 datalist 唯一不可替代的优势是「零 JS、无障碍友好、移动端软键盘自动适配」。如果你的场景满足以下全部条件，才建议保留：
- 数据量小（
- 不需要高亮已输入部分（如把 "北京" 中的 "北" 加粗）
- 不依赖键盘方向键导航（原生下拉只支持
↑/↓/Enter，无Tab切换） - 接受 UI 完全不可控，且 Firefox 下 dropdown 位置偶尔错位
一旦需要滚动加载、分组标题、图标、禁用项、点击外区域关闭等任意一项，就必须切到 JS 方案 —— 不是“更漂亮”，而是“功能上做不到”。
最常被忽略的一点：原生 datalist 的匹配逻辑是“starts with”，不是“contains”，且不支持正则。用户输“海”想看到“上海”“海口”，原生方案直接失败。
