Oracle APEX 选择列表（select list）图标旁加文字或替换图标咨询

方案1：直接将图标替换为文字 #

• 打开APEX应用页面设计器，定位到目标选择列表项，进入属性面板的「外观」板块
• 找到「图标」配置项，删除原有图标类名（比如你当前用的fa-calendar-search），直接输入你要显示的文字month即可
• 如需调整文字样式，可在「高级」→「CSS类」中新增自定义类custom-select-text，然后在页面内联CSS中添加样式规则：

.custom-select-text .t-Form-itemIcon {
  font-size: 14px;
  color: #333;
  padding: 0 8px;
  font-weight: 500;
}

方案2：保留原有图标，在图标旁追加文字 #

两种实现方式可选：

CSS伪元素实现（无需JS） #

• 先给目标选择列表设置唯一的静态ID，例如P1_MONTH_SELECT
• 在页面内联CSS中添加如下规则，将选择器中的静态ID替换为你自己设置的即可：

#P1_MONTH_SELECT + .t-Form-itemIcon::after {
  content: "month";
  margin-left: 4px;
  font-size: 14px;
  font-family: system-ui, sans-serif;
}

动态JS实现 #

• 给目标选择列表设置静态ID后，在页面「页面加载时执行」的动态动作中添加以下JS代码：

// 替换为你的选择列表静态ID
const selectId = 'P1_MONTH_SELECT';
const iconElement = document.querySelector(`#${selectId} + .t-Form-itemIcon`);
// 追加文字节点
const textNode = document.createTextNode('month');
iconElement.appendChild(textNode);
// 调整图标和文字的间距与对齐
iconElement.style.display = 'inline-flex';
iconElement.style.alignItems = 'center';
iconElement.style.gap = '4px';

注意：以上方案适配APEX 20.1及以上版本，如果你使用的是更早的版本，可通过浏览器F12检查元素获取对应图标的类名，替换代码中的选择器即可生效。

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