如何删除文本/输入框周围的边框?(铬)(复制)

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用作modals。为了避免这些以及所有其他元素的突出显示，您可以这样做:

*: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. :)

我发现解决方案。我使用:概述:没有;在CSS中，它似乎起作用了。无论如何，谢谢你的帮助。:)

#6

Solution

解决方案

*:focus {
    outline: 0;
}

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

使用大纲:0代替大纲:没有重点。这是有效的和更好的实践。

#7

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

这将从所有和任何元素中去除铬的橙色框架，无论它是什么，在哪里

*: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

I found out that you can also use:

我发现你也可以使用:

input:focus{
   border: transparent;
}

#10

Set

集

input:focus{
    outline: 0 none;
}

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

”!“重要”只是以防万一。这不是必要的。(现在它不见了。连接。)

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