html - Chrome と Safari でテキスト ボックスの周りにある黄色の境界線を削除する方法

Question

HTML ページがあります。ページを chrome または Safari で表示すると、テキスト ボックスの周りに黄色の境界線が表示されます。

境界線を削除するために、追加しました

<style type="text/css">
  input{
  outline:none;
}
</style>

そして国境はなくなった。

しかし、Mac マシン (chrome & Safari) でページを取得している間、まだそこにあります。Macでそれを修正する方法を知っている人はいますか?

Answer 1

:focus {
  outline: 0;
  outline-color: transparent;
  outline-style: none;
}

Answer 2

ブートストラップの CSS を使用している場合、それが原因である可能性があります。ここで問題を見つけてください：

select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

これを使用してbootstap.cssを編集できない場合は、魅力のように機能します。

select:focus, input:focus, textarea:focus {
  outline: 0;
  outline-color: transparent;
  outline-style: none;
}

Answer 3

色を設定しすぎることもできます:

.foo:active, .foo:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}