如何移除Dojo中TitlePane组件的黑色轮廓线

嘿，我刚好在Dojo 1.10版本里处理过一模一样的问题！那个黑色轮廓线其实是组件获得焦点时的默认样式（可能是浏览器自带或者Dojo主题的默认设置），下面给你两种实用的解决方案：

方案一：全局移除所有TitlePane的轮廓线 #

如果你的项目里所有TitlePane都不需要这个轮廓，可以直接用CSS覆盖默认样式：

/* 针对TitlePane标题栏的焦点状态移除轮廓 */
.dijitTitlePaneTitle:focus,
.dijitTitlePane .dijitTitlePaneTitleNode:focus {
    outline: none !important;
}

这里的!important是为了确保样式优先级高于Dojo主题的默认样式，保证生效。

方案二：仅移除指定TitlePane的轮廓线（推荐） #

要是你只想修改某个特定的TitlePane，不想影响全局组件，可以给目标组件加自定义类：
首先修改你的JS代码，给TitlePane添加自定义类名：

require(["dojo/ready", "dijit/TitlePane", "dojo/dom"], function(ready, TitlePane, dom){
    ready(function(){
        var tp;
        tp = new dijit.TitlePane({
            title:"I'm a TitlePane",
            content: "Collapse me!",
            "class": "no-outline-titlepane" // 添加自定义类
        });
        dom.byId("holder").appendChild(tp.domNode);
    });
});

然后在CSS里针对这个自定义类写样式：

.no-outline-titlepane .dijitTitlePaneTitle:focus,
.no-outline-titlepane .dijitTitlePaneTitleNode:focus {
    outline: none;
}

注意：可访问性提示 #

移除轮廓线可能会影响键盘导航用户的体验，如果你需要兼顾可访问性，可以把轮廓换成其他视觉反馈，比如修改焦点时的背景色：

.no-outline-titlepane .dijitTitlePaneTitle:focus {
    outline: none;
    background-color: #f0f0f0; /* 用背景色变化提示焦点状态 */
}

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