给<select>加border需重置appearance：select{border:2px solid #337ab7;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:6px 12px;}，否则浏览器默认UI层会覆盖边框。
HTML下拉框怎么加 border 样式
直接给 <select> 元素加 border 是可行的，但要注意：浏览器默认样式会干扰效果，尤其在 Chrome 和 Safari 下，appearance: none 必须配合使用，否则边框可能被系统控件“盖住”或显示不一致。
为什么加了 border 看不见？常见原因
不是代码写错了，而是被默认渲染覆盖了。主流浏览器（特别是 Chromium 内核）会给 <select> 加一层原生 UI 层，导致纯 CSS 的 border 不生效或只显示局部。
- 没重置
-webkit-appearance或appearance，系统下拉箭头和边框冲突 - 父容器或全局样式（如 Normalize.css）重设了
border为0 - 用了
outline: none却忘了补上border，焦点态消失后看起来“没边框”
可靠设置 border 的最小 CSS 组合
下面这段样式能跨 Chrome/Firefox/Safari 稳定显示边框，同时保留可点击区域和焦点反馈：
select {
border: 2px solid #337ab7;
border-radius: 4px;
padding: 6px 12px;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 可选：加个自定义下拉箭头图标 */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 2'%3e%3cpolygon points='0,0 4,0 2,2' fill='%23337ab7'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 8px;
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-appearance: none是 Chrome/Safari 必加项，否则 border 会被截断 -
padding要显式设置，不然文字会贴边、高度塌陷 - 如果项目用 Tailwind 或 Bootstrap，注意它们可能已重置
appearance，需检查是否被覆盖
兼容旧版 IE 的注意事项
IE 10/11 不支持 appearance，但它的 <select> 默认就显示 border，所以反而更简单——直接写 border 就行。不过要避免用 background-image 模拟箭头，IE 对 data URL 支持不稳定。
如果必须兼顾 IE，建议用 JS 检测 appearance 支持性，或统一用包裹容器 + 伪元素模拟下拉控件——但那已超出纯 CSS 设 border 的范畴。
真正麻烦的从来不是加 border 这一行代码，而是你改完之后，在另一个浏览器里发现它又“消失”了——这时候先查 appearance，再查 computed styles 里的实际生效值，比反复调 border-color 有用得多。
