23

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

ここに画像の説明を入力してください

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

誰かがこれをして、私が上書きすべきクラスが何であるかを知っていますか?

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

4

8 に答える 8

51
li a
{
    outline-color: transparent;
}​
于 2012-12-12T11:18:45.600 に答える
11

クイックソリューション:

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

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

アノンとコンスタンティンDの答えの違いは何でしたか?

アノンは、「liタグ」内の実際の「タグ」を正しくターゲットにしました。tabs();を常に覚えておいてください。ソートされていないリスト内で「タグ」を使用します。タブナビゲーションを実際に表示します。

例:

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

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

jQueryUIタブウィジェットを起動します

$('#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>
于 2013-03-26T01:27:24.487 に答える
10

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

.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

于 2013-07-03T17:21:37.903 に答える
5

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

.ui-tabs .ui-tabs-nav li a { 
    outline:none;
}
于 2013-08-03T18:01:30.557 に答える
1

ui-state-focusおよびui-state-activecssクラスをオーバーライドできます。

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

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

jQuery UIの場合、タブをオーバーライドui-state-activeするだけで十分です。

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

于 2012-12-12T11:43:20.830 に答える
1

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

.ui-state-focus {
        outline-style:none;
    }
于 2013-08-28T18:47:49.207 に答える
0

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

.ui-state-focus:focus, .ui-state-focus, li a {
    box-shadow:none;
}
于 2015-09-14T06:14:29.877 に答える
0

私は同じ問題に直面していました。jQuery mobileは実行時にクラスを適用します。上記のソリューションを試しましたが、うまくいきませんでした。その後 、要件を満たすui-shadowクラスフォームを削除しました。<div data-role="navbar" class="ui-corner-all">

于 2016-06-16T11:21:34.420 に答える