web-dev-qa-db-ja.com

jQuery UI-フォーカスのオレンジ色のタブ境界を削除

私はこの境界を削除しようとしています：

enter image description here

フォーカスのみで表示されているため、chromeコンソールを使用して、どのクラスを上書きするかを見つけることができません。

誰かがこれを行って、私が上書きする必要があるクラスを知っていますか？

編集：これは標準的な動作であると思います ここ 例を見ることができます。 Chromeも使用しています。

jqueryjquery-uitabsfocusborder
23
gotqn
li a
{
    outline-color: transparent;
}​
51
anon

迅速なソリューション：

実際の.ui要素に影響を与えたい場合の解決策

.ui-state-active a, .ui-state-hover a {
    outline: none;
}

AnonとKonstantin Dの答えの違いは何ですか？

Anonは「liタグ」内の実際の「aタグ」を正しくターゲティングしました。そのtabs（）;を常に覚えておいてください。ソートされていないリスト内で「タグ」を使用します。タブナビゲーションを実際に表示します。

例：

CSSもli：aタグのアウトラインに影響します

.ui-state-active a, .ui-state-hover a {
    outline: none;
}

jQuery UIタブウィジェットを起動

$('#my-tabs').tabs();

HTMLのタブマークアップ

<div id="my-tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 1</a></li>
    </ul>
    <div id="tab-1"></div>
    <div id="tab-2"></div>
</div>
11
Daniel H. Hemmingsen

私はダニエルのソリューションが好きです、これをそれに追加するだけです：

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

.ui-state-visited a＆.ui-state-focus a別のタブをクリックしたときにアウトラインが表示されないようにする/マウスをホバー領域から離す

10
Pixelomo

私の答えは、上記のすべての答えを組み合わせたものです。

.ui-tabs .ui-tabs-nav li a { 
    outline:none;
}
5
anonymous

受け入れられた回答はFirefoxでは機能しますが、MacではChrome）で問題が発生しました。
アウトラインスタイルの属性は、これを解決してくれたようです。

.ui-state-focus {
        outline-style:none;
    }
1
jsh

ui-state-focusおよびui-state-active cssクラス。

.ui-state-focus {
    border: none;
    outline: none;
}

.ui-state-active {
    border: none;
    outline: none;
}

jQuery UI Tabsの場合ui-state-activeで十分です。

Update：あなたの場合、これはui-state-activeクラスではなく、webkitの通常のアンカーアウトラインです。私はあなたのフィドルを更新しました： http://jsfiddle.net/ukPW6/4/

1
Konstantin Dinev

私は同じ問題に直面していました。 jQueryモバイルは実行時にクラスを適用します。上記の解決策を試しましたが、うまくいきませんでしたi-shadow class form <div data-role="navbar" class="ui-corner-all">それは私の要件を満たしました。

0
Rudresh Bhatt

上記の解決策がまだ機能しない場合は、box-shadowプロパティ。これを試して：

.ui-state-focus:focus, .ui-state-focus, li a {
    box-shadow:none;
}
0
Ari