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);
}