web-dev-qa-db-ja.com

テキスト/入力ボックスの周囲の境界線を削除するにはどうすればいいですか？（クロム）

テキスト/入力ボックスの周りのオレンジ色または青の境界線（アウトライン）を削除する方法を誰かが説明できますか？ Chromeでは、入力ボックスがアクティブになっていることを示すためだけに起こると思います。これが私が使っている入力CSSです：

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

enter image description here

cssgoogle-chromeinputborder
1108
Joey Morani

この枠は、要素がフォーカスされていることを示すために使用されます（つまり、入力を入力するか、Enterキーを押してボタンを押すことができます）。あなたはそれを削除することができます、しかし：

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

ユーザビリティのために、どの要素がキーボードフォーカスを持っているかを知るための他の方法を追加することをお勧めします。

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

*:focus {
    outline: none;
}
2021
CEich

現在の答えはBootstrap 3.1.1ではうまくいきませんでした。これが私が上書きしなければならなかったものです：

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
129
gwintrob
input:focus {
    outline:none;
}

これはします。オレンジ色の輪郭が表示されなくなります。

88
azram19
<input style="border:none" >

私にとってはうまくいった。 HTML自体で修正したいのですが…:)

57
Kailas

私は解決策を見つけました。
私はCSSでoutline:none;を使いましたが、うまくいったようです。とにかく助けてくれてありがとう。 :)

37
Joey Morani

解決策 

*:focus {
    outline: 0;
}

シモンズ：焦点にoutline:0の代わりにoutline:noneを使ってください。それは有効でより良い習慣です。

24
Touhid Rahman

これは、すべての要素からクロムのオレンジ色の枠を削除します。

*:focus {
    outline: none;
}
20
nonamehere

次の構文を使用してテキストボックスの枠線を削除し、強調表示されているブラウザスタイルの枠線を削除してください。

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
16
Tabish

セット

input:focus{
    outline: 0 none;
}

「！重要」は念のためです。それは必要ありません。 [そして今や消えた。 - 終了]

12
madd

私はあなたがまた使用できることがわかった：

input:focus{
   border: transparent;
}
11
Refilon

これは間違いなくうまくいきます。オレンジ色のアウトラインは表示されなくなります。すべてのタグに共通です。

*:focus {
    outline: none;
}

いくつかのタグに固有のもの、例：inputタグ

input:focus {
   outline:none;
}
10
Prashant Gupta