SAPUI5下拉框（ComboBox）虚线外框无法隐藏问题求助

嘿，我完全懂你被这个自动弹出来的焦点虚线框烦到的心情——新建窗口就自动获焦，还得点外面才消失，确实影响体验。咱们来一步步彻底解决它：

第一步：从根源阻止自动获焦 #

既然打开窗口时ComboBox会自动获得焦点，那咱们先试试直接关掉这个自动获焦的行为，这比单纯隐藏样式更高效。

如果是在XML视图里定义的ComboBox，加上autoFocus="false"属性：

<ComboBox id="createDocCombo" class="comboCreateDoc" autoFocus="false" ... />

如果是在JS里创建的组件，设置对应的属性：

new sap.m.ComboBox({
    id: "createDocCombo",
    class: "comboCreateDoc",
    autoFocus: false,
    // 其他配置项
});

或者在控制器里获取组件后设置：

this.byId("createDocCombo").setAutoFocus(false);

第二步：精准覆盖焦点样式（彻底隐藏所有场景） #

如果自动获焦关掉后还有偶尔出现的焦点框，或者你需要确保点击ComboBox内部时也不会出现，那就需要精准命中SAPUI5组件的焦点样式元素。之前你的样式可能没覆盖到:focus-visible伪类，或者选择器层级不够，试试下面的CSS：

/* 针对你的自定义类comboCreateDoc的ComboBox核心元素 */
.comboCreateDoc .sapMInputBaseInner:focus,
.comboCreateDoc .sapMInputBaseInner:focus-visible,
.comboCreateDoc .sapMFocusable:focus,
.comboCreateDoc .sapMFocusable:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    /* 如果连焦点时的边框变色也想去掉，加上下面这句 */
    border-color: transparent !important;
}

/* 可选：如果下拉选项的焦点框也想隐藏 */
.comboCreateDoc .sapMComboBoxItem:focus,
.comboCreateDoc .sapMComboBoxItem:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

为什么之前的样式没生效？ #

SAPUI5的组件样式层级比较深，而且现代浏览器会用:focus-visible来替代传统的:focus显示焦点轮廓，之前的样式可能没覆盖到这个伪类；另外，sapMFocusable这个类是SAPUI5标记可聚焦元素的通用类，必须精准命中它的焦点状态才行。

注意：无障碍访问提醒 #

虽然隐藏焦点框能满足视觉需求，但要注意这会影响键盘导航的用户体验——他们依赖焦点轮廓来知道当前选中的元素。如果你的应用需要考虑无障碍，建议只在特定场景下隐藏，或者提供替代的焦点提示方式。

内容的提问来源于stack exchange，提问作者Jeffrei Hunter Rangel