☰

入力テキスト要素の境界線のハイライトを削除する方法 質問する

tag-icon • tag-icon css input safari webkit border
入力テキスト要素の境界線のハイライトを削除する方法 質問する

HTML 要素が「フォーカスされている」（現在選択されている/タブで移動されている）場合、多くのブラウザ（少なくとも Safari と Chrome）ではその周囲に青い枠線が表示されます。

私が取り組んでいるレイアウトでは、これは気が散ってしまい、見た目も良くありません。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox ではこれが行われないようですが、少なくとも、次の方法で制御できます。

border: x;

IE のパフォーマンスについて誰かが教えてくれたら、興味があります。

Safari でこのちょっとしたフレアを削除できればいいのですが。

ベストアンサー1

それを実行する前に、フォーカス アウトラインはアクセシビリティとユーザビリティの機能であることに注意してください。フォーカス アウトラインは、現在フォーカスされている要素をユーザーに知らせるものであり、多くのユーザーがこれを頼りにしています。フォーカスを可視化するには、別の方法を見つける必要があります。

あなたの場合は、次のことを試してください:

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

おすすめ記事