CSS修改select背景色遇阻：background-color无效，box-shadow隐藏箭头怎么办？

• 深色背景页面中，select元素默认白色显示效果极差
• 尝试用background-color修改背景色无效，仅能通过以下box-shadow方案实现背景色修改，但该方案会隐藏下拉箭头：

select { box-shadow: 0 0 10px 100px rgb(41,40,59) inset; color: rgb(200,200,200); }

方法1：完全自定义样式（推荐） #

通过appearance属性去掉浏览器默认样式，自己控制背景色和下拉箭头，兼容性较好：

CSS代码 #

/* 包裹select的容器，用于定位箭头 */
.select-wrap {
  position: relative;
  display: inline-block;
}

select {
  /* 移除浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* 设置深色背景和文字颜色 */
  background-color: rgb(41,40,59);
  color: rgb(200,200,200);
  
  /* 给右侧箭头预留空间 */
  padding-right: 2.2em;
  /* 基础样式优化 */
  border: 1px solid #555;
  border-radius: 4px;
  padding: 0.4em 0.6em;
  font-size: 1em;
}

/* 添加自定义下拉箭头 */
.select-wrap::after {
  content: '▼';
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(200,200,200);
  pointer-events: none; /* 确保点击箭头时能触发select下拉 */
}

HTML结构 #

<div class="select-wrap">
  <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</div>

方法2：轻量修改（保留类默认箭头） #

用SVG作为箭头图标，直接通过background属性同时设置背景色和箭头，无需额外容器：

select {
  /* 移除默认箭头样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* 设置背景色+自定义SVG箭头 */
  background: rgb(41,40,59) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='rgb(200,200,200)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 0.6em center;
  background-size: 1.2em;
  
  color: rgb(200,200,200);
  padding-right: 2em;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 0.4em 0.6em;
}

补充说明 #

之前background-color无效是因为浏览器对select的默认样式优先级极高，必须先通过appearance系列属性移除默认样式，才能让自定义背景色生效。

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