Answers:
对于您的情况,请尝试:
input.middle:focus {
outline-width: 0;
}
或一般而言,影响所有基本表单元素:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
在评论中,诺亚·惠特莫尔(Noah Whitmore)建议更进一步,以支持将contenteditable
属性设置为的元素true
(有效地使它们成为输入元素的一种)。以下内容也应该针对这些对象(在支持CSS3的浏览器中):
[contenteditable="true"]:focus {
outline: none;
}
尽管我不建议这样做,但出于完整性考虑,您始终可以使用以下命令禁用所有内容的焦点轮廓:
*:focus {
outline: none;
}
请记住,焦点轮廓是可访问性和可用性功能;它会提示用户当前所关注的元素。
select:focus {outline:none;}
<button>
jQuery UI和Twitter Bootstrap使用的标记,因此button: focus
为了完整性起见,我将其添加到列表中。
button, button:focus { outline:none; }
这是一个旧线程,但是作为参考,必须注意,不建议禁用输入元素的轮廓,因为这会妨碍可访问性。
outline属性的存在是有原因的-为用户提供键盘焦点的清晰指示。有关此主题的更多信息和其他资源,请访问http://outlinenone.com/
Only thing is that you won't be able to see the focus(outline focus) on it
正是我的意思。删除轮廓将禁用焦点事件而不是实际事件的视觉指示。删除视觉指示意味着您要为依赖该指示的残障人士加倍努力。
outline:none;
不考虑其含义的情况下使用简单的方法(即)。仅仅因为事情容易并且节省时间,并不意味着它是最佳实践:)
浏览器呈现的默认轮廓很难看。
例如:
最推荐的最常见的“修复”是outline:none
-如果使用不正确,则是可访问性的灾难。
我发现一个非常干切的网站可以很好地解释所有内容。
当使用TAB键(或等效键)浏览Web文档时,它为具有“焦点”的链接提供视觉反馈。这对于不能使用鼠标或有视觉障碍的人们特别有用。如果删除大纲,那么这些人将无法访问您的网站。
好的,让我们尝试与上述相同的示例,现在使用TAB
键进行导航。
请注意,即使不单击输入也如何知道焦点在哪里?
现在,让我们试着outline:none
对我们的信赖<input>
因此,再次TAB
单击该键,可在单击文本后浏览并查看会发生什么。
弄清楚如何确定重点在哪里?唯一的信号是光标闪烁。我上面的示例过于简单。在实际情况下,页面上不会只有一个元素。与此类似的东西。
现在,如果我们保留大纲,则将其与相同的模板进行比较:
所以我们建立了以下
删除丑陋的轮廓,并添加自己的视觉提示以指示焦点。
这是我的意思的一个非常简单的例子。
我删除轮廓并在:focus和:active上添加底部边框。我还通过将:focus和:active(个人喜好)设置为透明来删除顶部,左侧和右侧的默认边框。
因此,我们使用前面的“真实世界”示例尝试上述方法:
可以通过使用外部库来进一步扩展该库,该库基于修改“概述”的想法,而不是像Materialize一样完全删除它
您可以得到一件并不丑陋且工作很少的东西
删除所有焦点样式通常对辅助功能和键盘用户不利。但是轮廓很难看,为每个交互式元素提供自定义的聚焦样式可能是一个真正的痛苦。
因此,我发现的最佳折衷方案是仅在我们检测到用户正在使用键盘进行导航时才显示轮廓样式。基本上,如果用户按下TAB键,我们将显示轮廓,如果他使用鼠标,我们将其隐藏。
它不会阻止您为某些元素编写自定义焦点样式,但至少它提供了很好的默认设置。
这是我的方法:
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *: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/>
click
侦听器是一个很好的接触。
使用此代码:
input:focus {
outline: 0;
}
在Firefox中,所有解决方案都不适合我。
以下解决方案更改了Firefox焦点的边框样式,并将其他浏览器的轮廓设置为无。
我已经有效地使焦点边框从3px蓝色发光变为与文本区域边框匹配的边框样式。这是一些边框样式:
这是代码:
input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}
#textarea {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>
您也可以尝试
input[type="text"] {
outline-style: none;
}
要么
.classname input{
outline-style: none;
}
尝试这个
*:focus {
outline: none;
}
这会影响您的整个页面
input:focus, textarea:focus {outline: none;}