テキスト/入力ボックスの周りのフォーカスボーダー（アウトライン）を削除する方法は？(Chrome)

Question

さらに

ソース非AMP版編集

テキスト/入力ボックスの周りのオレンジまたはブルーのボーダー（アウトライン）を削除する方法について、どなたかご説明いただけますか？入力ボックスがアクティブであることを示すために、Chromeでのみ発生すると思います。私が使用している入力用CSSは以下の通りです。

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

.

プログラミング

google-chrome focus css input border

3日 8月 2010 в 1:49

20 ビュー

ソース非AMP版編集

input:focus {
    outline:none;
}

これでOKです。オレンジ色のアウトラインが表示されなくなります。

93

0

解説 (3)

ソース非AMP版編集

解決策を見つけました。
使ったのはCSSでoutline:none;を使用したところ、うまくいったようです。とにかくお世話になりました :)

38

0

解説 (2)

CEich · Accepted Answer · 2010-08-03T13:52:36+00:00

このボーダーは、要素がフォーカスされていることを示すために使用されます（つまり、入力を入力したり、ボタンをEnterで押したりすることができます）。除去することもできますが

textarea:focus, input:focus{
    outline: none;
}

使いやすさのために、どの要素がキーボードフォーカスされているかをユーザーが知るための他の方法を追加するとよいでしょう。

Chrome は、モーダルとして使用される DIV などの他の要素にもハイライトを適用します。これらの要素や他のすべての要素にハイライトを適用しないようにするには、次のようにします。

*:focus {
    outline: none;
}