如何移除Oracle APEX中点击卡片时出现的蓝色边框

APEX卡片点击后出现的蓝色边框是浏览器默认的焦点轮廓，之前的CSS未生效通常是因为选择器未精准命中实际元素，以下是几种可行方案：

方案一：全局移除所有卡片的焦点边框 #

在页面的内联CSS（页面属性 > CSS > 内联）或应用级CSS文件中添加以下代码：

/* 覆盖卡片及内部元素的焦点样式 */
.a-Card:focus,
.a-Card .a-Card-content:focus,
.a-Card a:focus {
    outline: none !important;
    box-shadow: none !important;
}

APEX标准卡片的核心类是.a-Card，点击时焦点可能落在卡片容器、内容区或内部链接上，所以需要同时覆盖这几种元素。

方案二：仅针对特定卡片区域生效 #

如果不想影响所有卡片，可给目标卡片区域添加自定义类：

1. 编辑目标卡片区域，在外观 > CSS类字段输入 no-focus-card
2. 添加针对性CSS：

.no-focus-card .a-Card:focus,
.no-focus-card .a-Card .a-Card-content:focus,
.no-focus-card .a-Card a:focus {
    outline: none !important;
    box-shadow: none !important;
}

方案三：针对卡片链接元素精准处理 #

当卡片的完整动作为重定向URL时，APEX会将卡片包装为<a>标签（类名.a-Card-link），可直接针对该元素设置：

.a-Card-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

无障碍访问优化建议 #

直接移除焦点轮廓可能导致键盘导航用户无法识别当前聚焦元素，建议使用:focus-visible伪类区分鼠标和键盘操作：

/* 鼠标点击时移除轮廓，键盘聚焦时保留 */
.a-Card:focus:not(:focus-visible),
.a-Card .a-Card-content:focus:not(:focus-visible),
.a-Card a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

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