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

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. Here's the input CSS I'm using:

任何人都可以解释如何删除文本/输入框周围的橙色或蓝色边框(轮廓)?我认为只有在Chrome上才会显示输入框处于活动状态。这是我正在使用的输入CSS:

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

11 个解决方案

#1

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:

此边框用于表示元素已聚焦(即您可以输入输入或按Enter键按钮)。但是你可以删除它:

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. To prevent the highlight on those and all other elements as well, you can do:

Chrome还会将突出显示应用于其他元素,例如用作模态的DIV。为了防止在这些元素和所有其他元素上突出显示,您可以:

*:focus {    outline: none;}

#2

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:

使用Bootstrap 3.1.1,当前的答案对我不起作用。这是我必须覆盖的内容:

.form-control:focus {  border-color: inherit;  -webkit-box-shadow: none;  box-shadow: none;}

#3

input:focus {    outline:none;}

This will do. Orange outline won't show up anymore.

这样做。橙色轮廓将不再显示。

#4

<input style="border:none" >

Worked well for me. Wished to have it fixed in html itself ... :)

对我来说工作得很好。希望在html本身修复它... :)

#5

I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)

我找到了解决方案。我用过:outline:none;在CSS中它似乎有效。无论如何,谢谢你的帮助。 :)

#6

Solution

*:focus {    outline: 0;}

PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.

PS:在焦点上使用轮廓:0而不是轮廓:无。这是有效的,更好的做法。

#7

this remove orange frame in chrome from all and any element no matter what and where is it

这样就可以从所有元素和任何元素中删除chrome中的橙色框架,无论它在何处和何处

*:focus {    outline: none;}

#8

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

#9

Set

input:focus{    outline: 0 none;}

"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]

“!important”就是以防万一。这不是必要的。 [现在它已经消失了。 -Ed。]

#10

I found out that you can also use:

我发现你也可以使用:

input:focus{   border: transparent;}

#11

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