如何在<option>选项被选中后修改<select>下拉框的样式

出现该问题的核心原因是浏览器默认启用了<select>元素的原生操作系统控件渲染，默认的appearance: auto属性会导致你写的CSS伪类样式被原生样式覆盖，很多时候视觉上的边框变粗也是默认聚焦轮廓outline和边框叠加导致的。

按以下步骤配置CSS即可实现所有状态下边框样式完全统一：

1. 先关闭原生控件渲染和默认轮廓
2. 统一设置基础样式和所有状态下的边框规则

/* 基础样式，所有状态的基准 */
select {
  /* 关闭浏览器原生控件渲染，这是自定义样式生效的前提 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 关闭默认聚焦轮廓，避免和边框叠加产生变粗的视觉效果 */
  outline: none;
  /* 自定义统一边框，可按需调整参数 */
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 30px 6px 10px;
  /* 可选：添加自定义下拉箭头，替代原生箭头 */
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8L1 3H11L6 8Z' fill='%236B7280'/%3E%3C/svg%3E") no-repeat right 10px center;
}

/* 覆盖所有可能触发样式变化的状态，保持和基础样式完全一致 */
select:active,
select:focus,
select:focus-visible,
select:hover,
select:visited {
  border: 1px solid #d1d5db;
  outline: none;
}

如果仍有部分浏览器生效异常，可以添加* { box-sizing: border-box; }全局规则，避免边框宽度计算不一致的问题。

内容的提问来源于stack exchange，提问作者Kaladin