如何修改Oracle APEX中区域显示选择器的选中及悬停样式？

开发者阿泽

2026-9-25

区域选择器样式修改方案

区域选择器样式参考

以下是通用CSS实现方案，你可以根据自己使用的技术栈（原生/UI组件库）调整类名：

1. 通用DOM结构参考（自定义Tab型选择器）

<div class="area-selector">
  <span class="area-item active">华东</span>
  <span class="area-item">华北</span>
  <span class="area-item">华南</span>
  <span class="area-item">西南</span>
</div>

2. 核心CSS代码

选中项样式（移除下划线+按钮背景）

.area-item.active {
  /* 清除原有下划线样式 */
  text-decoration: none;
  border-bottom: unset;
  /* 按钮样式配置，可按需调整参数 */
  background-color: #1677ff;
  color: #fff;
  border-radius: 4px;
  padding: 3px 10px;
}

未选中项+悬停样式

/* 未选中项基础样式 */
.area-item:not(.active) {
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
  /* 可选：添加过渡动画让样式变化更流畅 */
  transition: all 0.2s linear;
}
/* 未选中项悬停效果 */
.area-item:not(.active):hover {
  background-color: #e6f4ff;
  color: #1677ff;
}

常见UI组件库适配示例

Element UI Tabs 组件适配

/* 覆盖默认选中下划线，添加按钮背景 */
.el-tabs__item.is-active {
  border-bottom: none !important;
  background-color: #1677ff !important;
  color: #fff !important;
  border-radius: 4px;
}
/* 未选中项悬停 */
.el-tabs__item:not(.is-active):hover {
  background-color: #e6f4ff !important;
}

Ant Design Tabs 组件适配

.ant-tabs-tab.ant-tabs-tab-active {
  border-bottom: none !important;
  background: #1677ff !important;
  border-radius: 4px;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #fff !important;
}
.ant-tabs-tab:not(.ant-tabs-tab-active):hover {
  background: #e6f4ff;
  border-radius: 4px;
}