单击某物时的虚线边框样式答案

【问题标题】：dotted border style when I click on something单击某物时的虚线边框样式
【发布时间】：2016-11-22 21:39:57
【问题描述】：

我的网页中有一个选项卡组件，当我选择其中一个选项卡时，我调用 ui-tabs-selected 类以赋予它特殊行为：

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    background: transparent !important;
    color: #444 !important;
    border-top-color: #3c8dbc;
    border-top-width: 2px;
    border-left-color: #f4f4f4;
    border-right-color: #f4f4f4;
}

问题是当我选择一个选项卡时，我得到了一个虚线边框样式，如下图所示：

[![在此处输入图片描述][1]][1]

但是当我单击页面上的其他位置时，这种虚线边框样式会消失。

我怎样才能摆脱这种影响？

【问题讨论】：

我认为你需要的是一个伪选择器w3schools.com/Css/css_pseudo_classes.asp
当标签被点击时，focus 状态被应用到元素。您需要改变处理焦点的方式。检查开发工具中的元素，看看它周围有边框和没有边框时的样子。见上面的评论，通常会为它声明一个伪选择器。
我认为这可以通过将轮廓样式设置为0来解决。它应该删除这个虚线轮廓。我已经添加了这个作为这个问题的答案。希望对你有帮助。

标签： css

【解决方案1】：

尝试使用轮廓样式，将其设置为 0 以将其移除。

.ui-tabs{
   outline: 0;
}

【讨论】：

【解决方案2】：

.ui-tabs{
   outline:none !important;
}

希望对你有帮助。

【讨论】：