如何从 Safari 和 Chrome 中的输入文本元素中删除焦点边框？

消除输入文本元素焦点边框

当输入文本元素获得焦点时，某些浏览器（包括 Safari 和 Chrome）可能会显示蓝色边框他们周围。虽然这种视觉提示对于可访问性和可用性很有用，但在特定的设计布局中可能并不总是理想的。

要在 Safari 中删除此边框突出显示，请使用 CSS：

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

此定位允许您将所需的输入元素与“middle”类隔离。或者，要影响所有表单元素，请使用：

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

Noah Whitmore 建议将其扩展到可内容编辑的元素：

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

最终，您还可以使用以下方法禁用所有元素上的焦点轮廓：

*:focus {
    outline: none;
}

但是，出于可访问性原因，不鼓励使用这种方法。请记住，焦点轮廓可以作为用户导航界面的有用指示器。

以上是如何从 Safari 和 Chrome 中的输入文本元素中删除焦点边框？的详细内容。更多信息请关注PHP中文网其他相关文章！