当一个HTML元素被“聚焦”(当前选中/标签进入),许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。
对于我正在工作的布局,这是分散注意力,看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做,或者至少,会让我控制它:
border: x;
如果有人能告诉我IE的表现如何,我会很好奇。
让Safari删除这一点闪光会很好。
: 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
在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 > < /