web-dev-qa-db-ja.com

アクティブなjQueryUIタブからアウトラインを削除しますか？

アクティブなjQueryUIタブのアウトラインを削除したい（または少なくとも色を変更したい）。

この例 からの作業これを試しましたが失敗しました：

<style>
    #tabs .ui-state-focus
    {
        outline: none;
    }
</style>

（これからのヒントに基づく 質問と回答 ）。

アクティブなタブからアウトラインを削除する秘訣は何ですか？

cssjquery-uijquery-ui-tabs
15
jedierikb

ターゲットにする必要があるのはクラスfocusではないと思います。それは、CSSの疑似クラス:focusです。

.ui-state-focus:focus { outline:1px dotted red !important }

それが機能する場合は、{outline:none}を使用して削除します。参考までに、あなたはそれを心配することによってあなたのアクセシビリティをジャッキアップしているようなものです。

24
Dawson

これを行う方法はたくさんあります。次に2つの例を示します（オプション2をお勧めします）。

オプション1

.ui-widgetクラスを使用するすべての要素からアウトラインを削除します。

.ui-widget * { outline: none; }​

これが 実用的なフィドル です。

オプション2

アウトラインの色を透明にします。

#tabs li a
{
    outline-color: none;
}​

これが 実用的なフィドル です。

23
James Hill

なんとか削除できました

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}
15
Cornelius

特定のタブでのみアウトラインを削除したい場合は、以下を使用することをお勧めします。

$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group

hTMLのscriptタグ内。

4
Gabriel N.

outline-width: 0;を指定すると、アウトラインを無効にできます。

#tabs li a
{
    outline-width: 0;
}​

IDを使用しないより一般的なソリューションは次のとおりです。

.ui-tabs ul li a
{
    outline-width: 0;
}​

デモ： http://jsfiddle.net/ebCpQ/

3
techfoobar

最初のタブ順序のフォーカスを防ぐためにも、これを行う必要がありました。

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
    outline:none;
}
3
Ryan

あなたはこれを試すことができます

a:focus { outline: none; }
1
Arsalan

奇妙なことに、これはどれも私にはうまくいきませんでした。輪郭を消すために境界線を追加する必要がありました（または青い境界線だったかもしれません）：

.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
}
0
deebs

より明確にするために、アウトラインはul.ui-tabsli.ui-tabs-nav内の要素に表示されます。上記の例のほとんどは、これについて言及するのを忘れていました。したがって、元の質問に対する実用的な回答は次のとおりです。

.ui-tabs-nav .ui-state-focus a {
    outline: none;
}

http://jsfiddle.net/xJ9Zr/5/

0
Frankey