如何修改select选项背景且不改变下拉展开区块背景？

根据你的需求，分两种常见场景给出解决方案：

场景1：修改下拉选项（Option）的背景，不改变下拉展开容器的背景 #

直接给option元素单独设置背景样式，同时避免select的背景样式继承到下拉容器：

/* 设置下拉选项的背景色 */
select option {
  background: red;
  color: white; /* 可选：调整文字颜色保证可读性 */
}

/* 确保下拉容器背景保持默认或自定义颜色 */
select {
  background: white; /* 未展开状态的select背景，可按需修改 */
}

如果在WebKit内核浏览器（Chrome、Safari）中下拉容器仍继承了select的背景，可添加以下规则强制覆盖：

/* WebKit浏览器专属：设置下拉容器背景 */
select::-webkit-dropdown-list {
  background: white;
}

场景2：修改未展开状态下Select控件的背景，不改变下拉展开容器的背景 #

直接给select设置background会导致下拉容器同步变色，因此需要先移除浏览器默认样式，再自定义控件外观：

select {
  /* 移除浏览器默认的Select样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 设置未展开时的控件背景色 */
  background: red;
  color: white;
  /* 添加自定义下拉箭头（避免默认箭头消失后无交互提示） */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="white" d="M6 9L0 3h12z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  /* 调整内边距，防止文字覆盖箭头 */
  padding: 8px 30px 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 强制设置下拉容器背景为默认/自定义颜色 */
select::-webkit-dropdown-list {
  background: white;
}

/* Firefox专属规则：确保下拉容器背景不受影响 */
@-moz-document url-prefix() {
  select {
    background: red url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="white" d="M6 9L0 3h12z"/></svg>') no-repeat right 10px center;
    background-size: 12px;
  }
}

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