从 extjs 按钮中删除轮廓

Posted 2023-03-06

【中文标题】从 extjs 按钮中删除轮廓

【英文标题】：Remove outline from extjs button

【发布时间】：2016-03-07 13:46:37

【问题描述】：

我知道要从链接中删除虚线轮廓，我需要执行以下操作：

a, a:active, a:focus 
    outline: 0 !important;

但是，当使用 extjs 按钮时，这不起作用。

我尝试将边框设置为无，并使用大纲：无！重要。但是，这些都不起作用。此外，我尝试将其大纲无给 .x-btn、.x-btn-focus、.x-focus 等，但没有任何结果。

谁能帮助我？我正在使用 Ext JS 5.1.1.451 Classic 进行测试。

编辑：我非常抱歉。我不知道如何分享煎茶小提琴。这是测试代码。这里使用 Extjs 5.1

Ext.application(
name: 'Fiddle',

launch: function() 
    Ext.create('Ext.toolbar.Toolbar', 
        renderTo: document.body,
        width: 500,
        items: [
            // xtype: 'button', // default for Toolbars
            text: 'Button'
        , 
            xtype: 'splitbutton',
            text: 'Split Button'
        ,
        // begin using the right-justified button container
        '->', // same as  xtype: 'tbfill' 
        
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
        ,
        // add a vertical separator bar between toolbar items
        '-', // same as xtype: 'tbseparator' to create Ext.toolbar.Separator
        'text 1', // same as xtype: 'tbtext', text: 'text1' to create Ext.toolbar.TextItem
        
            xtype: 'tbspacer'
        , // same as ' ' to create Ext.toolbar.Spacer
        'text 2', 
            xtype: 'tbspacer',
            width: 50
        , // add a 50px space
        'text 3']
    );

);

您可以尝试单击按钮并查看链接大纲。

这就是我所指的：

另外，如果有帮助，我正在 Debian 上使用 Chrome。

【问题讨论】：

您在哪种浏览器中遇到问题？

请制作一个我们可以清楚地看到问题的示例页面。

【参考方案1】：

覆盖以下 CSS：

.x-btn-focus.x-btn-default-toolbar-small .x-btn-wrap 
    outline: 1px dotted #333333;

【讨论】：

是的，我指的是单击链接时看到的“虚线”轮廓。它在您单击按钮后显示。不过谢谢！

我的浏览器没有这种行为 - 你会想像别人问的那样说出你使用的浏览器。

我正在使用 Chrome。操作系统是 Debian（如果有区别的话）。我还用我所看到的图像编辑了我的原始帖子。

我意识到的其他事情：它只发生在 ExtJs 的“经典”版本中，例如 Ext JS 5.1.1.451 Classic