原生 样式无法完全用 CSS 控制，最可靠方案是 appearance: none 加自定义包裹结构；下拉选项（）基本不可美化，需 JS 重写才能实现图标、悬停等效果。
原生 <select></select> 的样式几乎无法通过 CSS 直接完全控制（比如下拉箭头、选项列表、聚焦边框等），强行用 appearance: none + 自定义包裹结构是目前最可靠、兼容性可接受的方案。
为什么直接改 select 的 border 或 padding 会失效或表现异常
浏览器对 <select></select> 的渲染高度依赖系统控件，尤其是 Windows 上的 Edge/Chrome 和 macOS 上的 Safari 表现差异极大。例如：
-
padding在某些版本 Chrome 中只影响文字上下间距，不撑开整体高度； -
background可能被系统箭头遮盖，或在 Firefox 中根本不起作用； -
border-radius在 Windows 下常被裁切，因为原生控件有硬边框层。
真正起作用的只有少数属性：color、font-size、cursor、width、height（部分生效），以及 appearance: none（需配合自定义背景箭头）。
用 appearance: none + 包裹容器实现可控美化
核心思路：隐藏原生下拉箭头，用 <div> 或伪元素模拟，把 <code><select></select> 视为“行为载体”，视觉交给父容器。
立即学习“前端免费学习笔记（深入）”；
- 给
<select></select>加appearance: none，并用background: transparent避免残留底色； - 用
padding-right为自定义箭头留出空间； - 在外层
<div class="select-wrapper"> 上设置真实边框、圆角、背景和伪元素 <code>::after画箭头； - 必须加
pointer-events: none到伪元素上，否则会拦截点击； - 移动端需额外处理
touch-action: manipulation防止延迟响应。
示例关键 CSS：
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper select {
width: 100%;
height: 40px;
padding: 8px 16px 8px 12px;
border: 1px solid #ccc;
border-radius: 6px;
appearance: none;
background: transparent;
font-size: 14px;
}
.select-wrapper::after {
content: "▼";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
}
下拉选项（option）根本没法用 CSS 美化
所有主流浏览器都不支持对 <option></option> 设置 padding、border-radius、背景渐变等。你能做的仅限于：
-
color和background-color（但部分浏览器会忽略background-color）； -
font-weight/font-style（有限支持）； - 用
optgroup分组并设label，仅文字层面组织； - 如需完整定制选项样式（如带图标、多行、悬停效果），必须用 JavaScript 完全替换为
<div> 列表 + 模拟展开逻辑 —— 这已超出“美化”范畴，属于组件重写。 <h3>别踩这些坑</h3> <p>实际项目中最容易翻车的点：</p> <ul> <li>忘了给 <code>select设z-index，导致自定义箭头被下拉选项盖住（尤其在position: relative容器里）； - 用
background-image替代伪元素画箭头时，没适配高对比度模式（Windows）或暗色主题，图标消失； - 在 Vue/React 中监听
change事件没问题，但若用input事件想实时捕获输入（比如搜索型下拉），原生select不触发 —— 必须换为input + ul组合； - 无障碍（a11y）被破坏：移除原生箭头后，没加
aria-label或role="combobox"，屏幕阅读器无法识别这是下拉控件。
真正的难点不在“怎么画得好看”，而在于“怎么让好看不牺牲可用性、可访问性和跨平台一致性”。多数人卡在伪元素箭头对不齐、移动端点不灵、或者一加 JS 就失去键盘导航支持——这些细节比样式本身更耗时间。
