更改 Switch 中选定标签的背景颜色

Question

有什么办法可以改变Oracle APEX 5.1.4中Switch选中药丸的背景颜色。

基本上，默认开关不是这样出现的：

I want the Switch to appear as below, when 'Yes' is selected:

And appear as below, when 'No' is selected:

有什么办法可以实现吗？

商品的HTML代码：

<fieldset tabindex="-1" id="SHOW_RECORDS" class="apex-button-group apex-item-yes-no apex-item-select">
    <legend class="u-VisuallyHidden">&lt;b&gt;Show Data&lt;/b&gt;</legend>
    <input type="radio" id="SHOW_RECORDS" name="SHOW_RECORDS" value="Y" required="" aria-required="true">
        <label for="SHOW_RECORDS_Y" class="a-Button">Yes</label><input type="radio" id="SHOW_RECORDS_N" name="SHOW_RECORDS" value="N" checked="checked">
        <label for="SHOW_RECORDS_N" class="a-Button">No</label>
</fieldset>

Answer 1

是按钮组还是单选按钮？我没有 APEX 5.1，但假设您可以为此任务编写两个 css 规则。像这样：

.apex-item-option input[value='Y'][checked="checked"] + label {
    background-color: green;
}

.apex-item-option input[value='N'][checked="checked"] + label {
    background-color: red;
}

Answer 2

这个有用吗？

input[type="radio"][value="Y"][checked="checked"] + label.a-Button {
        background-color: red;
        color: #fff;
}
input[type="radio"][value="N"][checked="checked"] + label.a-Button {
        background-color: green;
        color: #fff;
}

Answer 3

经过反复试验，找到了方法。

我在主题滚轮中创建了自定义 CSS。

/* Custom On/Off Color - No Color */
.t-Form-fieldContainer--radioButtonGroup .customOnOffColor.apex-item-radio input:checked + label,
.customOnOffColor.apex-button-group input:checked+label {
    background-color: #EF9A9A;
}

/* Custom On/Off Color - Yes Color */
.t-Form-fieldContainer--radioButtonGroup .customOnOffColor.apex-item-radio input[value=Y]:checked + label,
.customOnOffColor.apex-button-group input[value=Y]:checked+label {
    background-color:#A5D6A7
}

然后在Advanced里添加了classcustomOnOffColor-->CSS类。

谢谢 Ivan 和 Tony 为我指明了正确的方向。

更改 Switch 中选定标签的背景颜色

Changing the background color of selected label in a Switch

oracle-apex

oracle-apex-5.1