如何删除输入文本元素上的边框突出显示

css input safari webkit border

当一个 HTML 元素被“聚焦”（当前被选中/进入）时，许多浏览器（至少 Safari 和 Chrome）会在它周围放置一个蓝色边框。

对于我正在处理的布局，这会分散注意力并且看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox 似乎没有这样做，或者至少会让我通过以下方式控制它：

border: x;

如果有人能告诉我 IE 的表现如何，我会很好奇。

让 Safari 移除这一点点耀斑会很好。

Community

在您的情况下，请尝试：

input.middle:focus {
    outline-width: 0;
}

或者一般来说，影响所有基本表单元素：

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

在评论中，Noah Whitmore 建议进一步支持将 contenteditable 属性设置为 true 的元素（有效地使它们成为一种输入元素）。以下内容也应该针对那些（在支持 CSS3 的浏览器中）：

[contenteditable="true"]:focus {
    outline: none;
}

尽管我不推荐它，但为了完整起见，您始终可以使用以下方法禁用所有内容的焦点大纲：

*:focus {
    outline: none;
}

请记住，焦点大纲是一种可访问性和可用性功能；它提示用户当前关注的元素。

谢谢科里，很好的提示。您还需要将 CSS 分配给 textarea 以覆盖所有输入字段。 input:focus, textarea:focus {outline: none;}

不要忘记选择select:focus {outline:none;}

还有 <button> 标记，它被 jQuery UI 和 Twitter Bootstrap 等使用，所以为了完整起见，我会将 button: focus 添加到列表中。

鉴于 HTML 5 属性 contenteditable，值得注意的是，任何可编辑元素在获得焦点时都会具有轮廓（在许多浏览器中），因此 div:focus {outline:none}、p:focus {outline:none} 或几乎任何元素也可以在这里应用。

@Cᴏʀʏ 你介意把关于 a11y 和可用性的注释移到你问题的最前面吗？ IMO 它将大大改善您的答案，因为删除 a11y 功能是一种不好的做法。

animuson

从所有输入中删除它

input {
 outline:none;
}

Rikard Askelöf

这让我困惑了一段时间，直到我发现这条线既不是边框也不是轮廓，而是阴影。所以要删除它，我必须使用它：

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Boaz

这是一个旧线程，但作为参考，重要的是要注意不建议禁用输入元素的轮廓，因为它会妨碍可访问性。

大纲属性的存在是有原因的——为用户提供键盘焦点的清晰指示。有关此主题的进一步阅读和其他资源，请参阅 http://outlinenone.com/

Boaz，仅供参考 input.middle{outline: none} 仍然允许您遍历元素（包括 input.middle）。按 Tab 键也将关注输入标签。唯一的问题是您将看不到它的焦点（轮廓焦点）。所以使用它并没有那么有害.. :)

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it - 这正是我的观点。移除轮廓会禁用焦点事件的视觉指示，而不是实际事件。删除视觉指示意味着您让依赖该指示的残疾人更加困难。

有时我们需要妥协，以取得一些成就:)

@AnishNair 是的。但是，阅读此线程的人通常更喜欢简单的方法（即 outline:none;）而不考虑其含义。仅仅因为某些事情很容易并且可以节省时间，并不意味着它是最佳实践:)

我迟到了讨论，但您仍然可以设置输入的焦点状态（例如更改边框颜色或宽度）。只要您在执行此操作时牢记可访问性（良好的对比度等），它就与默认轮廓一样易于访问。

Ali Al Amine

唯一对我有用的解决方案

边界实际上是一个影子。所以要隐藏它，我必须这样做：

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

Tom Esterez

2021 年编辑：您现在可以使用：https://github.com/WICG/focus-visible

删除所有焦点样式通常对可访问性和键盘用户不利。但是轮廓很丑陋，并且为每个交互元素提供自定义的焦点样式可能会很痛苦。

因此，我发现的最佳折衷方案是仅在我们检测到用户正在使用键盘导航时才显示大纲样式。基本上，如果用户按下 TAB，我们会显示轮廓，如果他使用鼠标，我们会隐藏它们。

它不会阻止您为某些元素编写自定义焦点样式，但至少它提供了一个很好的默认值。

我就是这样做的：

// 检测键盘用户 const keyboardUserCssClass = "keyboardUser";函数 setIsKeyboardUser(isKeyboard) { const { body } = 文档； if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // 这是一种仅在用户使用 TAB 键导航时激活焦点样式的快速技巧。这是我们找到的最佳折衷方案 // 在不牺牲可访问性的情况下保持良好的设计。 document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // 在按钮上按 ENTER 会触发坐标为 0 的点击事件 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); });正文：不（.keyboardUser）*：焦点{大纲：无； }

默认情况下，您不会看到轮廓。但是按 TAB 键，你会看到焦点元素

这是锚链接

Rizwan

您可以使用以下方法删除文本/输入框周围的橙色或蓝色边框（轮廓）：outline:none

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

Yosep Tito

试试这个css，它对我有用

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

虽然此代码可能会解决 OP 的问题，但最好包括说明您的代码如何解决 OP 的问题。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。

Luke

当焦点在元素上时删除轮廓，使用下面的 CSS 属性：

input:focus {
    outline: 0;
}

此 CSS 属性删除焦点上所有输入字段的轮廓，或使用伪类使用下面的 CSS 属性删除元素的轮廓。

.className input:focus {
    outline: 0;
}

此属性删除选定元素的轮廓。

corn on the cob

尝试这个：

*:focus {
    outline: none;
}

这将影响您的所有页面。

kkpareek

如果上述解决方案不起作用，您可能正在使用引导程序，因此 .form-control 类默认将 box-shadow css 属性应用于您的输入字段。

解决方案将是：

.form-control {
    box-shadow: none;
}

如何删除输入文本元素上的边框突出显示

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们