如何修改SAPUI5中获焦/活跃UI元素的蓝色边框颜色？

SAPUI5中获焦元素的蓝色边框由框架默认CSS控制，你可以通过自定义CSS覆盖这些样式，具体方法如下：

1. 定位目标CSS选择器 #

不同类型的UI元素，获焦状态对应的CSS类有所区别，常见的有：

• sapMFocusable:focus：通用可获焦元素的获焦状态
• sapMSlt:focus：sap.m.Select控件的获焦状态
• sapMLIBFocusable:focus：列表项等元素的获焦状态

你也可以通过浏览器开发者工具（F12）选中目标元素，查看其获焦时的具体类名，实现更精准的样式覆盖。

2. 编写自定义CSS代码 #

在项目的CSS文件中添加以下代码，将颜色值替换为你需要的目标颜色（示例用红色#ff0000）：

/* 覆盖通用可获焦元素的获焦边框 */
.sapMFocusable:focus {
    outline: 1px solid #ff0000 !important;
    outline-offset: 0;
}

/* 针对sap.m.Select控件的获焦边框及阴影 */
.sapMSlt:focus {
    border-color: #ff0000 !important;
    box-shadow: 0 0 0 0.125rem rgba(255, 0, 0, 0.2) !important;
}

/* 覆盖列表类元素的获焦边框 */
.sapMLIBFocusable:focus {
    outline: 1px solid #ff0000 !important;
}

3. 关键注意事项 #

• 使用!important强制提升自定义样式的优先级，确保覆盖框架默认样式
• 若需要同步修改获焦时的光晕效果，可调整box-shadow的颜色参数，保持视觉一致性

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