2012-03-20 11 views
31

Toggableタブを使用していますTwitters BootstrapブートストラップのTogglableタブ - アウトライン/フォーカスの削除?

問題がありますが、例からもわかります。ユーザーがタブをクリックすると、アクティブなタブの周囲に点線の枠が表示されます。

私は問題のFirefoxの11スクリーンショットを使用しています:

enter image description here

私はその点線の枠線を取り除くために探しています。誰があなたがこれをやっているか知っていますか?

.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
    outline:none; 
} 

私はお勧めしますが、それは障害者と画面を持つ人々を助けるために一部に存在するので、あなたが、中にそれを残して次のように

おかげ

+2

?選択したタブを視覚的に識別する行のみが表示されます。どのブラウザを使用していますか? –

+1

点線の境界線が表示されません。それは私にしっかりしています – DG3

+0

@burhan私はFireFox v11を使用しています – StuBlackett

答えて

48

リンク要素にoutline: 0;を試してみてください。 css-tricks.com/removing-the-dotted-outline

//line 2576 of bootstrap.css 
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
outline: 0; 
color: #555555; 
background-color: #ffffff; 
border: 1px solid #ddd; 
border-bottom-color: transparent; 
cursor: default; 
} 
+0

そうです。前にアウトラインにCSSを使用したことはありません。それはあまりにもクロスブラウザを行うでしょうか? – StuBlackett

+0

line nrは非対応ファイルで、Bootstrap v2.0.2 – Tim

+1

私はそれがFirefoxのものだと思います。点線は他のブラウザでは表示されない可能性があります。 – Tim

11

あなたはアウトラインを意味し、あなたはそれを削除することができます読者はあなたのコンテンツを適切に表示するので、使いやすさに影響を与えます。

+3

これは間違いなく非常に重要です。アウトラインプロパティを削除する場合は、リンクやインタラクティブ要素の場合は、別のスタイルで置き換える必要があります。マウスでページをナビゲートできない(またはそうしたくない)ユーザーは、現在どの要素がフォーカスされているかを視覚的に示す必要があります。これはアクセシビリティ要件です。 – Marcus

2

は、Firefoxや他のすべてのブラウザの問題を解決するにはを参照してください、私は次のCSSを使用します。国境を集中

/* Remove dotted outline from image inputs */ 
input::-moz-focus-inner { 
    border: 0; 
} 

/* Remove dotted outline from all links */ 
a { 
outline: 0; 
} 
2

は、アクセシビリティ機能です。それを削除することで、あなたのサイトにアクセスすることができなくなってしまいます。何人かは、私は障害を持つ人々を意味します。

This videoは、(彼は移動性障害を持っています)私のポイントを得るのを助けます。 (彼は境界線を削除するには鯉ときにHere's it forwarded。)

1

最も簡単な方法は、あなたが少ないから、あなたのCSSをコンパイルする場合は、あなたの小さいファイルこれだけです

.tab-focus() { 
    outline: 0; 
} 

にこのコードをドロップします。あなたのページのCSS次

6

用途:

html * { 
    outline: 0 !important; 
} 
0

「無効」クラスまたは状態自体は補助装置のためではありません。

私は情報がどこから来たのか分かりませんが、それは完全に間違っています。 「無効」は、ステートです。ここで、ボタンまたはアンカーはNOT ENABLEDです。ユーザがクリックできないことを意味します。または、それをクリックすると何も起こりません。障害を持つ人々は、このタグの使用によって決して影響を受けません。 BTW-私は障害を持つ人々にサポートとサービスを提供する非営利団体のWeb開発者/デザイナーであり、スクリーンリーダーやその他の補助デバイスを含むさまざまなデバイスで自分のページをテストします。

フォーカスのあるタブのクラスは.focusで、アクティブなタブのクラスは.activeです。

アクセシビリティのための設計が重要ですので、常にコードをW3C準拠のバリデーター(https://validator.w3.org/など)でチェックしてください。時には、JavaScriptを使ってサイトのタブのタブや矢印の順序を手動で制御しなければならないことがありましたが、一般的にBootstrapはそれをかなりうまく処理します。

例:私は、Web用.disabledクラスは、すべての時間を形成して使用 。すべての必須フィールドに適切な情報が含まれるまで、[送信]ボタンは無効になっています。次に、.disabledクラスを削除して、送信を許可します。

つまり、を実行すると、には、補助デバイスのフォーカス/ホバー項目に境界線を含める必要があります。これにより、ユーザーは自分のサイト上で「ホバリング」しているものを追跡することができます。上で述べたように、あなたはあなたのデザインに合うようにスタイルを変更することができますが、フォーカスを示すものがあることを確認してください。

誰かがこれに関する反論の情報を持っているなら、私はそれを読むことに興味があります。

2

あなたは、以下のサンプルを使用することができます;)国境を点在何

.nav > li > a { 
    outline:none; 
} 
関連する問題