web-dev-qa-db-ja.com

Chromeの入力ハイライト/フォーカス枠をリセット/削除するにはどうすればいいですか？

私はchromeが:focusに太い境界線を付けることを見ましたが、私がborder-radiusを使った場合はそれはちょっと見苦しいです。それを削除する方法はありますか？

image: chrome :focus border

csscss3google-chromefocusborder
330
Jiew Meng

あなたはそれを使用してそれを削除することができるはずです

outline: none;

ただし、これは使い勝手にとって潜在的に悪いことです。要素がフォーカスされているかどうかを見分けるのは難しいでしょう。 Tab キー - 要素がフォーカスされているときには、何らかの形で反映する必要があります。

661
Pekka 웃

私はそれを完全に削除するために以下のすべてをしなければなりませんでした

outline-style:none;
box-shadow:none;
border-color:transparent;
108
George

既定のフォーカスを削除するには、既定の.cssファイルで次のコマンドを使用します。

:focus {outline:none;}

その後、要素ごとに、またはデフォルトの.cssで、フォーカス枠の色を制御できます。

:focus {outline:none;border:1px solid red}

redをあなたが選んだ16進数コードに置き換えてください。

枠をそのままにして、背景色（または画像）を制御してフィールドを強調表示することもできます。

:focus {outline:none;background-color:red}

:-)

78
Meditation Room

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

*:focus {
    outline: none;
   }

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

input:focus{
   outline:none;
  }
20
Prashant Gupta
border:0;
outline:none;
box-shadow:none;

これでうまくいくはずです。

16
noelietrex

最も簡単な方法は、このようなものを使用することですが、それほど良くないかもしれないことに注意してください。

input {
  outline: none;
}

これがお役に立てば幸いです。

7
miksiii

outline: none;とborderをフォーカスの違う色に設定することができます。

5
asawilliams

問題はあなたがすでにアウトラインを持っているときです。 Chromeはまだ何かを変えていて、それは本当に苦痛です。何を変更すればよいのかわかりません。

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

No focusWith focus

5
Alain Zelink