题 如何删除文本/输入框周围的边框(轮廓)? (Chrome)[重复]


这个问题在这里已有答案:

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

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

enter image description here


972
2017-08-03 13:49


起源


注意oulines也出现在不同的情况下:在IE9中你可以看到按钮周围的小点,如果你使用tab选择它(即你在按钮之前点击一个字段并使用Tab转到下一个字段,直到你到达按钮[转到上一个字段是Shift + Tab]) - Adrien Be
...如果有人需要从firefox中的select元素中删除它: notes.jerzygangi.com/... - Stratboy


答案:


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

textarea:focus, input:focus{
    outline: none;
}

您可能希望为用户添加一些其他方式,以了解哪些元素具有键盘焦点,但可用性。

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

*:focus {
    outline: none;
}

1812
2017-08-03 13:52



这不适合我。我正在使用Chrome,最新更新。我放 input:focus {outline: 0;} 在CSS中,但是当我输入时,蓝色的Mac轮廓仍然存在。 - Joe P.
使用 outline: none - aceofspades
outline-style:none与Chromium(版本34)和Firefox(版本30)兼容 - Nantoka
删除默认情况下的轮廓是无法访问的:焦点。这意味着使用键盘进行导航的用户将很难看到当他们点击标签时突出显示哪个链接/项目。如果有的话,应该增强元素的突出显示来实现它 更多 明显哪个项目有焦点。 - Torkil Johnsen
@TorkilJohnsen,虽然我同意100%该元素应该明显集中,但默认的蓝/橙环行为并不总是正确的策略。只要采用某种策略(并在整个设计系统中采用一致),就应该编写CSS以支持该决策。 - Crispen Smith


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

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

100
2018-02-21 03:43



box-shadow: none; 为我做了诀窍。当我放入元素时没有 :focus它还消除了Chrome放置在无边框和输入框上的非常微妙的阴影。 - Tim Scott
这对我有用。由于某种原因输入:focus {outline:none;}不起作用。 - AlmostPitt
这对我有用。我正在使用FF最新的浏览器和大纲:没有不工作。 - Narendra Verma
此解决方案也适用于bootstrap v4。 - Steve Snow


input:focus {
    outline:none;
}

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


83
2017-08-03 13:52



而不是输入:focus {outline:0; } - > outline:none;作品 - BetaCoder
除非您提供其他样式,否则不要这样做,这对于可访问性很重要。看到 outlinenone.com - mattumotu
实际上,这个CSS还不够。例如,如果您使用的是JQueryUI选项卡,则在单击选项卡后会出现丑陋的蓝色边框,如果您只使用CSS。你需要添加:focus或li:focus,以防止边框。 - Mike Gledhill


<input style="border:none" >

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


45
2017-10-08 07:26



<input style =“border:0px”>也可以。 - Fuzzy Analysis
你可以三倍:输入{border:0 none transparent} - Leo
当我将border:none添加到css类时,它仍然显示输入字段的边框。内联css style =“border:none”的工作原理 - arun8
@ arun8听起来像你的CSS选择器不是最高的'优先级'(忘了单词但它的喜欢,你的选择器的重要性,例如p> span.class比span.class更重要所以它将使用p中的代码> span.class - Brandito
@ arun8你可以尝试在你的css类中使用“!important” - Kailas


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


34
2017-08-03 13:51



这是你要删除的焦点大纲。这是有原因的:可用性。特别是键盘用户如果你删除它会讨厌它。 - RoToRa
@RoToRa如果他使用阴影CSS 3制作更好的一个怎么办? - ShrekOverflow


*:focus {
    outline: 0;
}

PS:使用 outline:0 代替 outline:none 关注焦点。这是有效的,更好的做法。


22
2018-05-23 09:55





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

*:focus {
    outline: none;
}

19
2017-10-10 20:43





请使用以下语法删除文本框的边框,并删除浏览器样式的突出显示边框。

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

16
2018-05-08 08:55



注意background-color属性上的透明定义。你不需要那个,当你需要写东西时你可能会遇到一个大问题(你找不到输入!)。顺便说一下,我个人会改变透明背景来选择颜色。例如,如果我的容器有红色,我会在输入上使用白色背景。 - Gilberto Sánchez


我发现你也可以使用:

input:focus{
   border: transparent;
}

10
2018-05-06 12:51