Oracle Apex表单页切换按钮颜色自定义：选中绿/未选红

针对你ID为P3_RESTRICTED的切换按钮，要实现选中（Yes）时绿色、未选中（No）时红色的效果，以下是几种可行方案：

方案一：纯CSS实现（推荐） #

Apex会为表单元素自动生成带-container后缀的父容器，直接通过CSS定位组件状态即可：

/* 未选中（No状态）样式 */
#P3_RESTRICTED-container .ui-slider-switch.ui-slider-off {
    background-color: #dc3545; /* 红色 */
    border-color: #dc3545;
}

/* 选中（Yes状态）样式 */
#P3_RESTRICTED-container .ui-slider-switch.ui-slider-on {
    background-color: #28a745; /* 绿色 */
    border-color: #28a745;
}

/* 可选：设置标签文字为白色，提升可读性 */
#P3_RESTRICTED-container .ui-slider-switch .ui-btn-text {
    color: #fff;
}

将这段CSS添加到页面的Inline CSS区域，或者应用到应用级的CSS文件中。

方案二：JavaScript动态监听状态 #

如果CSS选择器在你的Apex版本中不生效，可以用JS监听切换事件并修改样式：

// 页面加载时初始化颜色
$(function() {
    updateToggleColor('P3_RESTRICTED');
    
    // 监听切换动作
    $('#P3_RESTRICTED').on('change', function() {
        updateToggleColor($(this).attr('id'));
    });
});

// 统一更新颜色的函数
function updateToggleColor(itemId) {
    const $switch = $('#' + itemId + '-container').find('.ui-slider-switch');
    const isChecked = $('#' + itemId).is(':checked');
    
    if (isChecked) {
        $switch.css({'background-color': '#28a745', 'border-color': '#28a745'})
               .removeClass('ui-slider-off').addClass('ui-slider-on');
    } else {
        $switch.css({'background-color': '#dc3545', 'border-color': '#dc3545'})
               .removeClass('ui-slider-on').addClass('ui-slider-off');
    }
}

把这段代码放到页面的Function and Global Variable Declaration中即可。

方案三：Apex动态动作实现 #

无需手写JS，通过Apex可视化配置完成：

1. 新建动态动作，触发条件选择当元素改变，目标元素选择P3_RESTRICTED
2. 添加True动作：选择设置样式，目标元素填写#P3_RESTRICTED-container .ui-slider-switch，CSS属性设置为background-color: #28a745; border-color: #28a745;
3. 添加False动作：选择设置样式，目标元素同上，CSS属性设置为background-color: #dc3545; border-color: #dc3545;

注意事项 #

• 检查页面源码确认容器ID：部分Apex版本可能生成的容器后缀不是-container，需要根据实际DOM结构调整选择器
• 颜色值可替换为你需要的十六进制、RGB或颜色名称
• 若使用Apex 21.0+的新组件，可能需要调整选择器为.apex-toggle-switch相关类

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