web-dev-qa-db-ja.com

CSS-入力フィールドのアクティブなハイライトを削除

Htmlとcssのみを使用して、アクティブな入力フィールドの周囲の青色(Firefox)のハイライト色を無効にするにはどうすればよいですか。 input {outline:none;}を使用してみましたが、成功しませんでした。助けてくれてありがとう! =)

oK、アウトラインに関する以前のコードを無視して、間違ったプロパティを選択して変更しました。私が取得しようとしているのは、スタイルを変更したり無効にしたりせずに、アクティブなフォーム入力フィールドの周囲の強調表示(ブラウザ、表示される太字と色付きの境界線)を単に削除することです。ありがとう=)

21
Kizer Yakuza

:focus宣言を使用する必要があります。この場合:

input:focus {outline:none;}

プロジェクト内のすべての入力には青い境界線がありません。

特定の属性が必要な場合は、これを使用します。

input[type=text]:focus {outline:none;}

それが役に立てば幸い。 =)

21
Paula Fleck

これを参照してください fiddle

outline: noneを機能させるには、ボーダープロパティを設定する必要があるようです。 borderディレクティブでコメントすると、アウトラインが消えます。

16
ohcibi
input {border:0; outline:none;}

すべての境界線/アウトラインを削除する必要があります。

7
Alex Shesterov

答えは私が信頼したよりも簡単です:

box-shadow:none;
6
Jason Slade

編集:私の解決策は複雑にする方法でした。それは簡単です:

input:focus {
  outline: none;
}

:focus状態をターゲットにする必要があります。

1
Azragh

ハイライトを削除するには、このルールを入力フィールドに追加してみてください。

-moz-appearance:none;

これは、それぞれのプレフィックスを使用して、WebKitベースのブラウザーでも実行できます。

-webkit-appearance:none;

これは、CSSプロパティを1つだけ使用して、境界線、アウトラインなどを処理します。 WebKitペアおよびFirefox以外のブラウザの場合-Opera and IE-borderおよびoutlineプロパティを含めることをお勧めしますまた、ブラウザの相互互換性を確保します。

0
Blieque
button {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}
0
quas