如何去除 Dojo 中 TitlePane 周围的黑色轮廓

Question

我必须为某个项目学习 dojo。谁能告诉我如何去除 Dojo 中 TitlePane 周围的黑色轮廓。

<script>
 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!"});
        dom.byId("holder").appendChild(tp.domNode);
    });
});
</script>

我查看了下面的示例应用程序 URL 并发现那里也有同样的问题

Dojo tookit doc

我正在使用 dojo v1.10

Answer 1

此样式由用户代理浏览器生成(chrome)，

如果你想删除它，

只需覆盖 .dijitTitlePaneTitleFocus 并将其 outline 设置为 none，如下所示：

.dijitTitlePaneTitleFocus {
    outline: none !important;
}

如果您想应用到所有其他小部件，您可以应用此样式：

.dijitFocused div  {
    outline: none !important;
}

查看工作片段：

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!"});
        dom.byId("holder").appendChild(tp.domNode);
    });
});

.dijitFocused div{
    outline: none !important;
}

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">
  <div  id="holder"></div>
</body>

如何去除 Dojo 中 TitlePane 周围的黑色轮廓

How to remove black outline around TitlePane in Dojo

javascript

dojo

dijit.layout

dijit.form