如何移除Oracle Apex单选按钮组（胶囊按钮样式）选中态紫色边框？

原代码无效的原因 #

1. 目标元素错误：Oracle Apex的胶囊样式单选按钮，原生input[type="radio"]通常被隐藏（设置为opacity: 0或visibility: hidden），视觉上的按钮是由兄弟元素（如<span class="a-Button--pill">）渲染的，选中状态的样式并不直接作用在input上。
2. 样式优先级不足：Apex自带的组件CSS优先级较高，自定义样式如果选择器层级不够，会被默认样式覆盖。

解决方法 #

1. 定位正确的DOM元素 #

打开浏览器开发者工具（F12），点击选中的胶囊按钮，查看实际渲染按钮的DOM结构，通常结构如下：

<div class="your-radio-group-class">
  <label class="apex-item-radio is-selected">
    <input type="radio" name="P1_RADIO">
    <span class="a-Button a-Button--pill">选项1</span>
  </label>
</div>

紫色轮廓一般是.a-Button--pill元素的outline或box-shadow属性。

2. 编写生效的CSS #

根据实际DOM结构，使用以下CSS移除边框/轮廓：

/* 替换为你单选按钮组的实际类名 */
.your-radio-group-class .apex-item-radio.is-selected .a-Button--pill {
  outline: none;
  box-shadow: none;
}

/* 如果点击后的焦点轮廓也需要移除，补充下面的规则 */
.your-radio-group-class .apex-item-radio .a-Button--pill:focus {
  outline: none;
  box-shadow: none;
}

• 若默认样式优先级仍更高，可在属性后添加!important强制覆盖：outline: none !important;
• 建议保留焦点状态的视觉标识（比如修改背景色），避免影响页面可访问性。

3. 应用CSS #

在Apex页面的"内联CSS"属性中添加上述代码，或在应用级CSS文件中引入。

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