css - 如何删除文本/输入框周围的焦点边框（轮廓）？ （Chrome）[重复](How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate])

Question

This question already has an answer here:

(这个问题在这里已有答案：)

• How to remove the border highlight on an input text element 14 answers

  (如何删除输入文本元素 14 上的边框高亮显示 答案)

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.

(我认为只有在Chrome上才会显示输入框处于活动状态。)

Here's the input CSS I'm using:

(这是我正在使用的输入CSS：)

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

  ask by Joey Morani translate from so

Answer 1

This border is used to show that the element is focused (ie you can type in the input or press the button with Enter).

(此边框用于显示元素是否已聚焦（即您可以键入输入或按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 will also apply highlighting to other elements such as DIV's used as modals.

(Chrome还会将突出显示应用于其他元素，例如用作模态的DIV。)

To prevent the highlight on those and all other elements as well, you can do:

(为了防止在这些元素和所有其他元素上突出显示，您可以：)

*:focus {
    outline: none;
}