如何删除文本/输入框周围的焦点边框（轮廓）？ （Chrome）[重复]

本文翻译自：How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]

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

---

#1楼

参考：https://stackoom.com/question/EFk9/如何删除文本-输入框周围的焦点边框-轮廓-Chrome-重复

---

#2楼

this remove orange frame in chrome from all and any element no matter what and where is it 这样就可以从所有元素和任何元素中删除chrome中的橙色框架，无论它在何处和何处

*:focus {
    outline: none;
}

---

#3楼

This will definitely work. 这肯定会奏效。 Orange outline will not show anymore.. Common for all tags: 橙色轮廓将不再显示..所有标签的共同点：

*:focus {
    outline: none;
}

Specific to some tag, ex: input tag 特定于某些标签，例如：输入标签

input:focus {
   outline:none;
}

---

#4楼

Please use the following syntax to remove the border of text box and remove the highlighted border of browser style. 请使用以下语法删除文本框的边框，并删除浏览器样式的突出显示边框。

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

---

#5楼

Solution 解

*:focus {
    outline: 0;
}

PS: Use outline:0 instead of outline:none on focus. PS：在焦点上使用outline:0而不是outline:none 。 It's valid and better practice. 这是有效的，更好的做法。

---

#6楼

Set 组

input:focus{
    outline: 0 none;
}

"!important" is just in case. “！important”就是以防万一。 That's not necessary. 这不是必要的。 [And now it's gone. [现在它已经消失了。 –Ed.] -Ed。]