如何删除黄色边框来自Chrome和＆amp ;;苹果浏览器

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

您可以尝试设置它也没有颜色：

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

Answer 3

如果你使用bootstrap的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;
}