[解決済み] 入力テキスト要素のボーダーハイライトを削除する方法

質問

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;
}

コメントで ノア・ホイットモア を持つ要素をサポートするよう、さらに踏み込んだ提案をしました。 contenteditable 属性に設定された true (事実上、これらは入力要素の一種となります)。以下は、それらもターゲットにするものです（CSS3対応ブラウザの場合）。

[contenteditable="true"]:focus {
    outline: none;
}

あまりお勧めはしませんが、念のため、常に すべて をこうしてください。

*:focus {
    outline: none;
}

フォーカスアウトラインはアクセシビリティとユーザビリティのための機能であり、現在どの要素にフォーカスが当たっているかをユーザーに伝える手がかりとなることを心に留めておいてください。