如何移除SAP UI5中点击/聚焦元素的虚线高亮边框？

Hey Samee, I’ve dealt with this exact frustration before—those persistent dotted focus outlines in SAP UI5 can be really tricky to get rid of, even seeing them in the Demo Kit makes sense since it’s using the same core UI5 styles. Let me share a few proven solutions that should work for you:

1. Global CSS Override (Quick Fix) #

UI5 applies focus styles through specific classes and native :focus pseudo-classes. Add this CSS to your project’s stylesheet to globally remove the dotted outline:

/* Remove dotted focus outline for all UI5 elements */
.sapMFocus,
.sapMFocus:focus,
.sapUiControl:focus,
.sapUiTfFocus {
  outline: none !important;
  box-shadow: none !important;
}

⚠️ Important Note: Be careful with this approach! Focus outlines are critical for keyboard navigation accessibility. If you use this, consider replacing the outline with a subtle alternative (like a faint box-shadow or background color shift) so keyboard users can still track their focus.

2. Targeted Control-Specific Styling #

If you only need to remove the outline from specific controls (not all elements), target their UI5 classes directly. For example, to fix buttons only:

/* Remove focus outline from UI5 buttons */
.sapMBtn:focus {
  outline: none !important;
}

You can find the exact class for any control by inspecting it in your browser’s DevTools—just click the focused element and check the class list in the Styles tab.

3. Custom Theme Editor (Cleanest Long-Term Fix) #

If you’re using a custom UI5 theme, use the SAP UI5 Theme Editor to modify the focus styles natively:

• Open the Theme Editor and load your custom theme
• Navigate to the "Content" section, then look for focus-related variables like --sapContent_FocusWidth or --sapContent_FocusColor
• Set --sapContent_FocusWidth to 0px or --sapContent_FocusColor to transparent to eliminate the outline
• Save and deploy your updated theme

This method avoids using !important overrides and keeps your styles aligned with UI5’s theme system.

Testing in the Demo Kit #

If you want to test this fix directly in the SAP UI5 Demo Kit, open your browser’s DevTools, go to the "Styles" tab, and paste the CSS snippet into the "Element.style" section of the focused element—you’ll see the dotted outline disappear immediately.

Remember, always prioritize accessibility when modifying focus styles. If you must remove the outline, ensure there’s another clear visual indicator for focused elements!

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