原生select因操作系统级别控件特性导致样式不一致且难以修改，尤其下拉箭头等内部结构无法通过常规CSS控制；可通过:focus和属性选择器调整部分外观如边框高亮与禁用状态，但深度自定义需用div+JS模拟实现，隐藏原生控件并构建可样式化结构，兼顾焦点管理与可访问性，平衡开发成本与设计需求。
下拉框（select 元素）在不同浏览器中默认样式差异大，且部分样式难以通过常规 CSS 修改，比如箭头图标或边框。单纯使用 :focus 伪类或属性选择器无法完全自定义外观，但结合两者可以增强交互控制和基础样式调整。
理解限制：原生 select 为什么难改样式？
原生 select 是操作系统级别的控件，在 Windows、macOS 或移动端表现不一致。多数浏览器对内部结构（如下拉箭头）不暴露 DOM 节点，因此无法直接用 CSS 替换。
- CSS 不能直接隐藏默认下拉箭头
- font、color、padding 等部分样式可修改
- border、background 在某些浏览器中受限
利用 focus 与属性选择器优化可用性
虽然不能彻底重绘下拉框，但可以通过 :focus 和属性选择器提升视觉一致性与用户体验。
示例：聚焦时高亮边框，区分禁用状态
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
}
<p>/<em> 聚焦状态添加外光晕 </em>/
select:focus {
outline: none;
border-color: #007cba;
box-shadow: 0 0 5px rgba(0, 124124, 186, 0.3);
}</p><p>/<em> 禁用状态下灰显 </em>/
select[disabled] {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}</p>真正解决方案：用 div 模拟实现完全自定义
若需完全控制样式（如更换箭头、下拉菜单风格），应使用 div + JavaScript 模拟 select。
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生 select，用自定义结构替代展示
- 通过 JS 同步选中值
- 配合 :focus-within 控制容器聚焦状态
<div class="custom-select" tabindex="0">
<span class="selected">选项一</span>
<ul class="options">
<li data-value="1">选项一</li>
<li data-value="2">选项二</li>
</ul>
</div>
此时可用 .custom-select:focus 控制整体焦点样式，实现统一设计语言。
基本上就这些——原生 select 样式受限是普遍问题，:focus 与属性选择器能改善交互反馈，但深度定制仍需模拟组件。实际项目中建议权衡开发成本与设计需求，优先考虑可访问性和兼容性。
