HTML要素が「フォーカス」されている（現在選択されている/タブで移動されている）場合、多くのブラウザー（少なくともSafariとChrome）はその周りに青い境界線を配置します。
私が取り組んでいるレイアウトの場合、これは注意をそらすものであり、正しく見えません。
<input type="text" name="user" class="middle" id="user" tabindex="1" />Firefoxはこれを実行していないようです。少なくとも、次の方法で制御できます。
border: x;誰かがIEのパフォーマンスを教えてくれるとしたら、私は興味があります。
Safariにこのわずかなフレアを除去させるといいでしょう。
回答:
あなたの場合、試してみてください：
input.middle:focus {
outline-width: 0;
}または一般的に、すべての基本的なフォーム要素に影響を与えるには：
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}コメントで、Noah Whitmoreは、これをさらにcontenteditable設定して、属性が設定された要素をサポートすることを提案しましたtrue（事実上、それらを入力要素のタイプにしています）。以下もそれらをターゲットにする必要があります（CSS3対応ブラウザー）。
[contenteditable="true"]:focus {
outline: none;
}私はそれをお勧めしませんが、完全を期すために、これですべてのフォーカスアウトラインをいつでも無効にすることができます。
*:focus {
outline: none;
}フォーカスの概要はアクセシビリティとユーザビリティの機能であることを覚えておいてください。現在フォーカスされている要素にユーザーを導きます。
select:focus {outline:none;}
<button>jQuery UIやTwitter Bootstrapで使用されるタグもありますのでbutton: focus、完全を期すためにリストに追加します。
button, button:focus { outline:none; }
これは古いスレッドですが、参考のために、入力要素のアウトラインを無効にすることはアクセシビリティを妨げるので推奨されないことに注意することが重要です。
アウトラインプロパティが存在する理由は、キーボードフォーカスの明確な表示をユーザーに提供するためです。この主題の詳細と追加情報については、http：//outlinenone.com/を参照してください。
Only thing is that you won't be able to see the focus(outline focus) on itそれがまさに私のポイントです。アウトラインを削除すると、実際のイベントではなく、フォーカスイベントの視覚的表示が無効になります。視覚的表示を削除するということは、その表示に依存している障害を持つ人々にとって、それを難しくすることを意味します。
outline:none;は、影響を考慮せずに簡単な方法（つまり）を好むでしょう。何かが簡単で時間を節約できるからといって、それがベストプラクティスであることを意味するわけではありません:)
ブラウザがレンダリングするデフォルトのアウトラインは醜いです。
例えばこれを見てください：
最も推奨される最も一般的な「修正」は、outline:none誤って使用するとアクセシビリティが損なわれることです。
あります非常にドライカットのウェブサイトだけでなく、すべてを説明して私が見つけたの。
これは、TABキー（または同等のキー）を使用してWebドキュメントをナビゲートするときに「フォーカス」があるリンクに視覚的なフィードバックを提供します。これは、マウスを使用できないか、視覚に障害がある人に特に役立ちます。アウトラインを削除すると、これらの人々はサイトにアクセスできなくなります。
では、上記と同じ例を試してみましょうTAB。キーを使用して移動します。
入力をクリックしなくてもフォーカスがどこにあるかを確認する方法に注意してください。
今、outline:none私たちの信頼を試してみましょう<input>
したがって、もう一度、TABテキストをクリックした後にキーを使用して移動し、何が起こるかを確認します。
焦点がどこにあるのかを理解するのがいかに難しいかをご覧ください。唯一の兆候はカーソルの点滅です。上記の私の例は非常に単純化されています。実際の状況では、ページに要素が1つしかないわけではありません。これに沿ってさらに何か。
アウトラインを保持している場合は、同じテンプレートと比較してください。
したがって、以下を確立しました
醜いアウトラインを削除し、フォーカスを示す独自の視覚的な手がかりを追加します。
これが私が意味することの非常に単純な例です。
アウトラインを削除し、：focusと：activeに下枠を追加します。また、：focusおよび：active（個人設定）で透明に設定することにより、上部、左側、右側のデフォルトの境界を削除します
したがって、前述の「実際の」例で上記のアプローチを試します。
マテリアライズのように完全に削除するのではなく、「アウトライン」を変更するという考えに基づいて構築された外部ライブラリを使用することで、これをさらに拡張できます。
あなたは醜くなく、ほとんど努力なしで機能するものになる可能性があります
これは、線が境界線でも輪郭線でもない、影であることに気づくまで、しばらく混乱していました。それを削除するには、これを使用する必要がありました：
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}CSSを使用して無効にできます！これは、青い枠線を無効にするために使用するコードです。
*:focus {
outline: none;
}これは青い境界線を削除します！
これは実際の例です：JSfiddle.net
それが役に立てば幸い！
すべてのフォーカススタイルを削除することは、アクセシビリティとキーボードユーザーにとって一般的に悪いことです。しかし、アウトラインは見苦しく、すべてのインタラクティブな要素ごとにカスタムのフォーカススタイルを提供するのは大変なことです。
したがって、私が見つけた最良の妥協点は、ユーザーがキーボードを使用して移動していることを検出した場合にのみアウトラインスタイルを表示することです。基本的に、ユーザーがTabキーを押すとアウトラインが表示され、ユーザーがマウスを使用する場合は非表示になります。
一部の要素のカスタムフォーカススタイルを作成することを妨げるものではありませんが、少なくとも適切なデフォルトを提供します。
これが私のやり方です：
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});body:not(.keyboardUser) *:focus {
outline: none;
}<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>clickリスナーがいい感じです。
Firefoxでは、どのソリューションも機能しませんでした。
次のソリューションは、Firefoxのフォーカスのボーダースタイルを変更し、他のブラウザーのアウトラインをnoneに設定します。
フォーカスの境界線を3pxの青い輝きからテキスト領域の境界線に一致する境界線スタイルに効果的にしました。ここにいくつかのボーダースタイルがあります：
破線のボーダー（ボーダー2px赤の破線）：
国境がない！（ボーダー0px）：
テキストエリアの境界線（境界線1px灰色）：
これがコードです：
input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}
#textarea {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}<textarea id="textarea">yo</textarea>
input:focus, textarea:focus {outline: none;}