当一个HTML元素被“聚焦”(当前选中/标签进入)，许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。
对于我正在工作的布局，这是分散注意力，看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做，或者至少，会让我控制它:
border: x;
如果有人能告诉我IE的表现如何，我会很好奇。
让Safari删除这一点闪光会很好。
当前回答
我尝试了所有的答案，我仍然不能让我的工作在移动，直到我找到-webkit-tap-highlight-color。
所以，对我有用的是……
* { -webkit-tap-highlight-color: transparent; }
其他回答
您可以使用:outline:none删除文本/输入框周围的橙色或蓝色边框(outline)
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
outline:none !important;
}
如果上面的解决方案不起作用，你可能正在使用bootstrap，因此.form-control类在默认情况下将box-shadow css属性应用到输入字段。
解决方案是:
.form-control {
box-shadow: none;
}
当焦点在元素上时，使用下面的CSS属性删除轮廓:
input:focus {
outline: 0;
}
这个CSS属性删除焦点上所有输入字段的轮廓，或者使用伪类使用下面的CSS属性删除元素的轮廓。
.className input:focus {
outline: 0;
}
此属性删除所选元素的轮廓。
我尝试了所有的答案，我仍然不能让我的工作在移动，直到我找到-webkit-tap-highlight-color。
所以，对我有用的是……
* { -webkit-tap-highlight-color: transparent; }
: focus-visible
对可访问性的好消息- Chrome和Firefox增加了对 : focus-visible。
隐藏焦点样式是不好的做法，因为可访问性要求(键盘导航)会使你的网站更不容易访问。
使用:focus-visible伪类，并让浏览器决定何时应用焦点。
:focus-visible /* Chrome */
注意，Firefox通过一个旧的带前缀的伪类来支持类似的功能:
:-moz-focusring /* Firefox */
button { color: #000; background-color: #fff; padding: 10px 16px; margin: 10px 0; border-radius: 4px; } button:focus { box-shadow: 0 0 0 2px #E59700; outline: 0; } button:hover { background-color: #eee; } button.with-focus-visible:focus:not(:focus-visible) { box-shadow: none; outline: 0; } button.with-focus-visible:focus-visible, button.with-focus-visible:moz-focusring { box-shadow: 0 0 0 2px #E59700; outline: 0; } <p>Click on the button using a mouse. Then try tabbing to the button.</p> <button>without :focus-visible</button> <button class="with-focus-visible">with :focus-visible</button>
文档:https://developer.mozilla.org/en-US/docs/Web/CSS/: focus-visible
w3规格:https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
