我想删除活动 jQuery UI 选项卡上的轮廓(或至少更改颜色)。
从这个例子开始,我尝试了这个没有成功:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(基于this question and answer的提示)。
从活动选项卡中删除轮廓的技巧是什么?
我想删除活动 jQuery UI 选项卡上的轮廓(或至少更改颜色)。
从这个例子开始,我尝试了这个没有成功:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(基于this question and answer的提示)。
从活动选项卡中删除轮廓的技巧是什么?
我不相信这focus
是你需要定位的类,它是 CSS psuedo-class:focus
.ui-state-focus:focus { outline:1px dotted red !important }
如果可行,请{outline:none}
删除它。不过,您有点担心它来提高您的可访问性,仅供参考。
我设法将其删除
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
如果您只想删除特定选项卡上的大纲,那么我建议您使用以下内容:
$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group
在你的 html 的 script 标签内。
您可以通过指定禁用大纲outline-width: 0;
#tabs li a
{
outline-width: 0;
}
不使用 ID 的更通用的解决方案是:
.ui-tabs ul li a
{
outline-width: 0;
}
演示:http: //jsfiddle.net/ebCpQ/
我也必须这样做以防止可能的初始标签顺序焦点:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
outline:none;
}
你可以试试这个
a:focus { outline: none; }
为了更清楚,轮廓出现在 ul.ui-tabs li.ui-tabs-nav 内部的元素上。上面的大多数例子都忘了提到这一点:所以这是原始问题的有效答案:
.ui-tabs-nav .ui-state-focus a {
outline: none;
}
奇怪的是,这些都不适合我。我必须添加一个边框才能使轮廓(或者它可能是一个蓝色边框)消失:
.ui-state-hover, .ui-state-focus, .ui-state-active
{
border: 1px solid #ccc !important; /*Or any other color*/
border-bottom: 0 !important;
}