如何修改HTML下拉框主显示区域的背景颜色？

完全可行，只需通过CSS分别控制<select>和<option>元素的背景色即可，具体操作如下：

基础实现代码 #

保留你原有的HTML结构：

<select>
   <option>Item 1</option>
   <option>Item 2</option>
   <option>Item 3</option>
</select>

添加以下CSS样式：

/* 设置select主显示区域的背景色 */
select {
  background-color: #ffcccc; /* 替换为你需要的颜色值 */
}

/* 重置下拉选项的背景色，避免继承select的样式 */
select option {
  background-color: white; /* 浏览器默认下拉选项背景色，可按需调整 */
}

针对浏览器默认样式的优化 #

部分浏览器会给<select>添加系统默认样式，可能导致背景色设置不生效或显示异常。这时可以添加appearance属性消除默认样式，若需要保留下拉箭头，可自定义箭头图标：

select {
  background-color: #ffcccc;
  -webkit-appearance: none; /* 适配webkit内核浏览器 */
  appearance: none; /* 标准属性 */
  /* 自定义下拉箭头（可选） */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 30px; /* 给箭头留出空间 */
}

select option {
  background-color: white;
}

这样就能单独修改select主显示区域的背景色，同时保持下拉选项的背景色不受影响。

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