如何删除input文本元素上的边框突出显示
当一个html元素被“聚焦”（当前被选中/选中）时，许多浏览器（至lessSafari和Chrome）将在其周围放置一个蓝色边框。
对于我正在进行的布局，这是分散注意力，看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" /> FireFox似乎不这样做，或者至less，会让我控制它
border: x;
如果有人能告诉我IE是如何执行的，我会好奇的。
但让Safari删除这一点耀斑将是很好的。
谢谢
在你的情况下，请尝试：
input.middle:focus { outline-width: 0; }
或者一般来说，要影响所有基本的表单元素：
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
在评论中， 诺亚·惠特摩 （ Noah Whitmore）build议进一步支持将contenteditable属性设置为true元素（使其成为一种input元素）。 以下也应该针对这些（在CSS3浏览器中）：
[contenteditable="true"]:focus { outline: none; }
虽然我不会推荐它，但为了完整起见，您可以始终禁用所有内容 ：
*:focus { outline: none; }
请记住，重点大纲是一个可访问性和可用性function; 它提示用户当前关注什么元素。
将其从所有input中删除
input { outline:none; }
这是一个古老的线程，但作为参考，重要的是要注意，不build议禁用input元素的轮廓，因为它阻碍了可访问性。
outline属性是有原因的 – 为用户提供清晰的键盘焦点指示。 有关此主题的进一步阅读和其他来源，请参阅http://outlinenone.com/
使用此代码：
input:focus { outline: 0; }
你可以使用CSS来禁用它！ 这是我用来禁用蓝色边框的代码：
*:focus { outline: none; }
这将删除蓝色边框！
这是一个工作的例子： JSfiddle.net
希望它有帮助！
在焦点位于元素上时移除轮廓，使用以下CSS属性：
input:focus { outline: 0; }
这个CSS属性删除焦点上所有input字段的轮廓，或者使用伪类来删除使用下面的CSS属性的元素的轮廓。
.className input:focus { outline: 0; }
该属性删除所选元素的轮廓。
你也可以试试这个
input[type="text"] { outline-style: none; }
要么
.classname input{ outline-style: none; }
这是一个普遍的问题。
浏览器呈现的默认大纲很难看。
看到这个例子：
form, label { margin: 1em auto; } label { display: block; }
<form> <label>Click to see the input below to see the outline</label> <input type="text" placeholder="placeholder text" /> </form>
另一个解决scheme是在默认情况下删除轮廓，但只有在用户按Tab键时才能激活它：
document.addEventListener('keydown', (e) => { if (e.key === 'Tab' && !document.body.classList.contains('showFocusOutline')) { document.body.classList.add('showFocusOutline'); } }); document.addEventListener('click', (e) => { document.body.classList.remove('showFocusOutline'); });
body:not(.showFocusOutline) *:focus { outline: none; }
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p> <button>This is a button</button> <a href="#">This is anchor link</a> <input type="checkbox" /> <textarea>textarea</textarea> <select/>
试试这也
.form-group input { display: block; background: none; padding: 0.175rem 0.175rem 0.0875rem; font-size: 1.4rem; border-width: 0; border-color: transparent; line-height: 1.9; width: 100%; color: #ccc; transition: all 0.28s ease; box-shadow: none; }
