如何在Oracle APEX中修改select list选择列表的背景颜色

以下是将选择列表默认蓝色背景改为红色的具体操作：

参考选择列表默认颜色截图：

1 配置选择列表静态ID（单组件修改需要，全局修改可跳过） #

• 打开APEX页面设计器，定位到需要修改的选择列表组件
• 在右侧属性面板找到「高级」分类，在「静态ID」字段填入自定义唯一标识，例如custom_select_01，保存组件设置

2 添加自定义CSS样式 #

可根据生效范围选择对应添加方式：

2.1 单页面生效（仅当前页面的目标选择列表生效） #

• 点击页面空白处，打开页面属性面板，找到「CSS」→「内联」输入框，填入以下代码：

/* 修改选择列表本身背景色 */
#custom_select_01 {
  background-color: red !important;
  color: #ffffff !important; /* 可选：修改文字为白色，提升可读性 */
}

/* 修改下拉展开后选中项、悬停项的背景色 */
#custom_select_01 option:checked,
#custom_select_01 option:hover {
  background-color: red !important;
  color: #ffffff !important;
}

2.2 全应用生效（所有选择列表统一修改） #

• 进入应用「共享组件」→「用户界面属性」，找到「CSS」→「内联」输入框，填入以下代码：

/* 全局修改所有选择列表本身背景色 */
select.apex-item-select {
  background-color: red !important;
  color: #ffffff !important;
}

/* 全局修改所有选择列表选中、悬停状态背景色 */
select.apex-item-select option:checked,
select.apex-item-select option:hover {
  background-color: red !important;
  color: #ffffff !important;
}

3 验证效果 #

保存所有设置后刷新前端页面即可看到修改效果。如果样式未正常渲染，可按F12打开浏览器开发者工具，排查是否有其他样式优先级冲突，调整CSS选择器权重即可。

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