背景透明时移除select下拉菜单上下空白的方法

当前实现的效果：

现有代码如下：

CSS #

body {
   background-color: #1A1C1E;
}

select {
  color: white;
  background: transparent;
  border: 1px solid gray;
  border-radius: 7px;
}

select option {
  color: white;
  border-color: #212529;
  background-color: #212529;
}

HTML #

<select name="state" class="p-2 pe-3" id="timeline">
  <option value="5">24 Hours</option>
  <option value="25">1 Week</option>
  <option value="50">1 Month</option>
  <option value="100">3 Months</option>
</select>

当前问题 #

设置白色文本+透明背景的Select后，下拉选项菜单的顶部和底部存在空白区域，尝试使用body背景色后仍有轻微颜色不一致。

修复方案 #

这个问题源于原生select组件的下拉菜单在不同浏览器中自带默认样式（比如内边距、容器背景），可以通过以下两种方式解决：

方案1：统一Select与下拉菜单的背景色

放弃透明背景，将select的背景色设置为和option一致，彻底消除色差：

body {
   background-color: #1A1C1E;
}

select {
  color: white;
  /* 替换透明为下拉菜单的背景色 */
  background-color: #212529;
  border: 1px solid gray;
  border-radius: 7px;
}

select option {
  color: white;
  background-color: #212529;
}

方案2：重置默认样式并匹配Body背景

如果坚持使用透明背景，需要重置select的原生外观，同时让option背景色与body完全一致：

body {
   background-color: #1A1C1E;
}

select {
  color: white;
  background: transparent;
  border: 1px solid gray;
  border-radius: 7px;
  /* 移除浏览器默认的select样式 */
  appearance: none;
  /* 调整内边距，避免自定义箭头覆盖文本 */
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  position: relative;
}

/* 自定义下拉箭头（替代原生箭头） */
select::after {
  content: "▼";
  color: white;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

select option {
  color: white;
  /* 与body背景色完全匹配 */
  background-color: #1A1C1E;
}

特殊情况说明

如果上述方案仍有细微差异，那是因为部分浏览器对原生select的下拉容器样式限制极多，无法完全自定义。这种情况下建议使用纯自定义的下拉组件（用div+ul模拟），可以100%控制所有样式细节。

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