私はこの境界線を削除しようとしています:
フォーカスのみが表示されているため、Chromeコンソールを使用して上書きするクラスを見つけることができません。
誰かがこれをして、私が上書きすべきクラスが何であるかを知っていますか?
編集:これは標準的な動作だと思います。ここで例を見ることができます。私もChromeを使用しています。
li a
{
outline-color: transparent;
}
実際の.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>
私はダニエルのソリューションが好きです、私はそれにこれを追加するだけです:
.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
私の答えは、上記のすべての答えを組み合わせたものです。
.ui-tabs .ui-tabs-nav li a {
outline:none;
}
ui-state-focus
およびui-state-active
cssクラスをオーバーライドできます。
.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/
受け入れられた回答はFirefoxで機能しますが、MacのChromeでは問題が発生しました。
アウトラインスタイルの属性は、私にとってこれを解決するように見えました。
.ui-state-focus {
outline-style:none;
}
上記の解決策がまだ機能しない場合は、box-shadow
プロパティが原因です。これを試して:
.ui-state-focus:focus, .ui-state-focus, li a {
box-shadow:none;
}
私は同じ問題に直面していました。jQuery mobileは実行時にクラスを適用します。上記のソリューションを試しましたが、うまくいきませんでした。その後
、要件を満たすui-shadowクラスフォームを削除しました。<div data-role="navbar" class="ui-corner-all">