当一个HTML元素被“聚焦”(当前选中/标签进入),许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。

对于我正在工作的布局,这是分散注意力,看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox似乎没有这样做,或者至少,会让我控制它:

border: x;

如果有人能告诉我IE的表现如何,我会很好奇。

让Safari删除这一点闪光会很好。


当前回答

焦点上的文本区域可能有框影..可以像这样删除:

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}

其他回答

: 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

您可以使用:outline:none删除文本/输入框周围的橙色或蓝色边框(outline)

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

试试这个css,它为我工作

textarea:focus, input:focus{ border: none; }

我尝试了所有的答案,我仍然不能让我的工作在移动,直到我找到-webkit-tap-highlight-color。

所以,对我有用的是……

* { -webkit-tap-highlight-color: transparent; }

在Firefox中,没有一个解决方案对我有效。

下面的解决方案更改了Firefox的焦点边框样式,并将其他浏览器的大纲设置为none。

我已经有效地使焦点边界从3px的蓝色发光到与文本区域边界匹配的边界样式。下面是一些边框样式:

虚线边界(边界2px红色虚线):

没有边界!(边境0 px):

Textarea border(边框1px纯灰色):

代码如下: 输入:焦点,textarea:焦点{ 大纲:没有;/**对于Safari, etc **/ 边框:1px纯灰色;/** For Firefox **/ } #{文本区域 位置:绝对的; 上图:10 px; 左:10 px; 右:10 px; 宽度:calc(100% - 20px); 身高:160 px; 显示:inline-block; margin-top: -0.2 em; } < textarea id = " textarea”>哟textarea > < /