ChatGPT解决这个技术问题 Extra ChatGPT

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

这个问题在这里已经有了答案:How to remove the border highlight on an input text element (20 answers) 7年前关闭。

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

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

https://i.stack.imgur.com/HSKYf.png

请注意,oulines 也出现在不同的情况下:在 IE9 中,如果您使用 tab 选择它,您可以在按钮周围看到小点(即,您在按钮之前的字段内单击并使用 Tab 转到下一个字段,直到您到达按钮 [转到上一个字段是 Shift + Tab])
...如果有人需要从 Firefox 中的选择元素中删除它:notes.jerzygangi.com/…
使用边框样式:无;背景颜色:白色;字体大小:13px;字体粗细:粗体;颜色:黑色;
正如@Torkil-Johnsen 在下面的评论中提到的那样,您可能希望提供不同的样式以使其更加明显,但是仅将其删除对可访问性非常不利(例如,仅使用键盘或其他辅助设备进行标签浏览的人元素)。
试试这个 CSS,它对我有用 textarea:focus, input:focus{ border: none; }

C
CommonSenseCode

此边框用于显示元素已获得焦点(即您可以输入输入内容或按 Enter 键)。不过,您可以使用 outline 属性将其删除:

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

您可能希望添加一些其他方式让用户知道哪些元素具有键盘焦点,但出于可用性考虑。

Chrome 还将突出显示其他元素,例如用作模式的 DIV。为了防止突出显示这些元素和所有其他元素,您可以执行以下操作:

*:focus {
    outline: none;
}

⚠️ 可访问性警告

请注意,从输入中删除轮廓是一种可访问性不好的做法。使用屏幕阅读器的用户将无法看到他们的指针聚焦在哪里。更多info at a11yproject


这对我不起作用。我正在使用 Chrome,最新更新。我将 input:focus {outline: 0;} 放在 CSS 中,但是当我输入时,蓝色的 Mac 轮廓仍然存在。
使用outline: none
大纲样式:没有一个适用于 Chromium(版本 34)和 Firefox(版本 30)
删除默认在 :focus 上的轮廓对可访问性不利。这意味着使用键盘导航的用户在点击选项卡时很难看到突出显示的链接/项目。如果有的话,应该增强元素的突出显示以使哪个项目具有焦点更明显。
@TorkilJohnsen,虽然我 100% 同意元素应该明显聚焦,但默认的蓝色/橙色环行为并不总是正确的策略。只要采用某种策略(并在整个设计系统中一致采用),就应该编写 CSS 来支持该决定。
j
johannchopin

当前的答案不适用于 Bootstrap 3.1.1。这是我必须覆盖的内容:

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

box-shadow: none; 为我解决了问题。当我在没有 :focus 的元素上添加它时,它还会消除 Chrome 在无边框和输入框上添加的非常微妙的阴影。
这对我有用。由于某种原因 input:focus { outline:none;} 不起作用。
这对我有用。我正在使用 FF 最新的浏览器和大纲:none 不起作用。
此解决方案也适用于 bootstrap v4。
在 bootstrap 4 上,如果要删除的轮廓围绕汉堡移动菜单,您可以使用:
j
johannchopin
input:focus {
    outline:none;
}

这会做。橙色轮廓将不再出现。


而不是 input:focus{ outline: 0; } -> 大纲:无;作品
除非您提供其他样式,否则不要这样做,这对于可访问性很重要。见outlinenone.com
实际上,这个 CSS 是不够的。例如,如果您使用 JQueryUI 选项卡,如果您只使用 CSS,则单击选项卡后会出现难看的蓝色边框。您确实需要添加 a:focus 或 li:focus 以防止出现边框。
这不利于可访问性,不应该这样做。
K
Kailas
<input style="border:none" >

对我来说效果很好。希望将其固定在 html 本身中... :)


也可以。
你可以三倍:输入{边框:0无透明}
当我将border:none添加到css类时,它仍然显示输入字段的边框。内联 css style="border:none" 在哪里工作
@arun8 听起来您的 CSS 选择器不是最高的“优先级”(忘记了这个词,但是类似,您的选择器的重要性,例如 p > span.class 比 span.class 更重要,因此它将使用 p 中的代码> 跨度.class
@arun8 你可以尝试在你的css类中使用“!important”
J
Joey Morani

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


那就是您要删除的焦点轮廓。它的存在是有原因的:可用性。如果您将其删除,尤其是键盘用户会讨厌它。
@RoToRa 如果他使用阴影 CSS 3 制作一个更好的会怎样?
j
johannchopin

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

*:focus {
    outline: none;
}

j
johannchopin

解决方案

*:focus {
    outline: 0;
}

PS:在焦点上使用 outline:0 而不是 outline:none。这是有效且更好的做法。


不,不能在 Chrome 上工作
如何更好地练习?您需要解释原因,而不仅仅是这么说。这绝对不是更好的做法。
d
daniel__

请使用以下语法删除文本框的边框,并删除浏览器样式的高亮边框。

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

注意 background-color 属性的透明定义。你不需要那个,当你需要写东西时你可能会遇到一个大问题(你不会找到输入!)。顺便说一句,就个人而言,我会更改透明背景以选择一种颜色。例如,如果我的容器是红色的,我会在输入端使用白色背景。
I
Ivanka Todorova

input:focus{
    outline: 0 none;
}

“!important”以防万一。那没有必要。 [现在它消失了。 ——编者。]


不要使用 !important ,除非你真的必须使用它。
@Mackelito 您必须使用 !important 才能使用 Bootstrap
b
bgilham

我发现你也可以使用:

input:focus{
   border: transparent;
}

问题可能在标题中有“边框”,但 OP 实际上是在询问默认大纲
h
hichris123

这肯定会奏效。橙色轮廓将不再显示。所有标签通用:

*:focus {
    outline: none;
}

特定于某个标签,例如:输入标签

input:focus {
   outline:none;
}