如何删除文本/输入框周围的焦点边框(轮廓)? (铬合金) [英] 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键).不过，您可以将其删除:

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, 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;
}

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