如何删除文本/输入框周围的焦点边框(轮廓)?(铬合金) [英] How to remove focus border (outline) around text/input boxes? (Chrome)

问题描述

谁能解释一下如何去除文本/输入框周围的橙色或蓝色边框(轮廓)?我认为它只会在 Chrome 上显示输入框处于活动状态.这是我正在使用的输入 CSS:

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

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

推荐答案

此边框用于显示元素已获得焦点(即您可以输入输入或按 Enter 键).不过，您可以使用 outline 属性删除它:

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

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

您可能希望添加一些其他方式让用户知道哪些元素具有键盘焦点，但为了可用性.

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome 还将突出显示其他元素，例如用作模态的 DIV.为了防止突出显示这些元素和所有其他元素，您可以执行以下操作:

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

---

⚠️ 无障碍警告

请注意，从输入中删除大纲是一种可访问性不好的做法.使用屏幕阅读器的用户将无法看到他们的指针所聚焦的位置.更多 信息在 a11yproject

这篇关于如何删除文本/输入框周围的焦点边框(轮廓)?(铬合金)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！