能，但非常有限——移动端原生select仅允许美化触发器（下拉框本身），无法控制弹出的option列表样式：iOS完全无视option的CSS，Android仅极少数属性有效且不稳定；appearance:none在Safari 16.4+和现代Chrome中可隐藏箭头，但需配合height、font-size等显式设置，并用外层容器+内联SVG背景图实现安全自定义箭头。
移动端原生 select 能不能只用 CSS 美化？
能，但非常有限——select 在 iOS 和 Android 上的渲染机制完全不同，且都刻意限制了对 option 列表的样式控制。你最多能改掉触发器（即下拉框本身）的外观，但点开后弹出的选项列表，iOS 完全无视你的 CSS，Android（Chrome）仅支持极少数属性（如 color、background-color），且行为不稳定。
appearance: none 在移动端是否生效？
在大多数现代 Android Chrome 和 Safari 16.4+ 中，appearance: none 可以隐藏默认箭头并释放部分样式控制权，但效果不一致：
- iOS Safari：
appearance: none有效，但select内部仍会强制撑高、忽略padding和line-height，实际可用高度由系统决定 - Android Chrome：支持
appearance: none，但若同时设置background-image或伪元素，可能触发渲染 bug（如箭头残留、点击区域偏移） - 必须搭配
font-size和height显式设定，否则 iOS 会自动放大以适配触控，导致文字被裁切
如何安全添加自定义下拉箭头？
不要依赖 ::after 伪元素覆盖原生箭头——移动端不支持对 select 的伪元素定位，且 iOS 会忽略。正确做法是用外层容器遮罩 + 背景图/SVG：
.styled-select {
position: relative;
width: 100%;
height: 44px; /* iOS 最小触控高度 */
}
.styled-select select {
width: 100%;
height: 100%;
padding-right: 32px; /* 为箭头留白 */
-webkit-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
border: 1px solid #ddd;
}
.styled-select select:focus {
outline: none;
border-color: #007aff;
}注意：background 使用内联 SVG 避免额外请求；right 12px 确保箭头与右侧边距一致；height: 44px 是 iOS 推荐最小触控尺寸，低于此值可能触发缩放。
立即学习“前端免费学习笔记（深入）”；
为什么不要试图美化 option？
因为根本做不到：
- iOS：完全无视所有
option的 CSS，包括color、background、font-size，弹出的是系统原生 picker - Android：部分版本允许改
option文字颜色，但一旦页面有滚动或焦点切换，样式极易丢失 - 任何尝试用
transform、position或z-index干预option渲染的行为，都会被浏览器直接忽略或降级为白屏
真正需要定制选项样式（比如加图标、分组标题、禁用态），必须放弃原生 select，用 div+ul+JavaScript 重写——但这已超出纯 CSS 范畴，且需手动处理焦点、键盘导航、屏幕阅读器标记等可访问性细节。
