HTML下拉框的<option>是替换元素，浏览器仅支持极少数CSS属性，text-indent无效；最兼容的方式是在文本中使用 或Unicode不合并空格（如 、 ）实现缩进。
HTML下拉框（<select>）不支持 text-indent
直接给 <select> 或其 <option> 设置 text-indent CSS 属性无效——浏览器会忽略它。这是规范行为，不是 bug。原因在于：<option> 是替换元素（replaced element），且绝大多数浏览器（Chrome、Firefox、Edge）对其样式控制极其有限，仅允许极少数 CSS 属性（如 color、background-color），text-indent 不在白名单内。
用 或 Unicode 空格字符手动缩进选项文字
最兼容、最可控的方式是直接在 <option> 的文本内容里加空格。注意：普通 ASCII 空格会被 HTML 自动合并，必须用不合并的空格字符。
-
-
- \t 或多个
<select> <option value="1">一级菜单</option> <option value="2"> 二级菜单</option> <option value="3">  三级菜单</option> </select>
用伪元素 + <datalist> 替代方案（仅限现代浏览器）
如果需要真正可样式化的“下拉列表”，且不要求兼容 IE 或旧版 Safari，可放弃原生 <select>，改用 <input list> 配合 <datalist>，再用 JS 模拟展开逻辑，并对 <option>（此时是 <datalist> 的子元素）应用完整 CSS：
-
<datalist>中的<option>支持text-indent、padding-left等常规样式 - 但注意：
<datalist>本身不提供下拉箭头和原生交互逻辑，需 JS 补全（如点击输入框展开、键盘导航等） - 移动端兼容性仍弱于原生
<select>，部分安卓 WebView 不触发list展开
用自定义下拉组件（React/Vue/纯 JS）彻底绕过限制
当缩进只是排版需求的一部分（比如还要支持分组、图标、禁用态灰化、搜索过滤），硬改原生 <select> 得不偿失。此时应直接用框架封装或手写一个：
立即学习“前端免费学习笔记（深入）”；
- DOM 结构完全可控：每个选项是
<div>或<li>，任意 CSS 都生效 - 缩进可用
padding-left、margin-left、甚至transform: translateX() - 务必保留
aria-expanded、aria-haspopup、键盘焦点管理（Tab/ArrowDown）以保障无障碍
原生 <select> 的缩进问题，本质是浏览器对表单控件样式自由度的主动限制。想“调 text-indent”这个动作本身，就说明你已经踩进兼容性墙里了——要么退一步用字符占位，要么进一步用自定义组件接管渲染权。
