WP hello-elementor 主题：发表评论按钮在 Chrome 中有一个奇怪的边框

Question

我创建了一个带有 hello-elementor 主题的 WordPress 网站： https://taligrade-profits.000webhostapp.com/hallo-welt/

当我单击“发表评论”按钮时，该按钮会显示黑色边框（仅在 Google Chrome 中）。我想摆脱这种影响。

我还添加了一点 CSS（因为我想这样设计那个按钮）：

.submit {
    background-color: #8766ff;
    border: none !important;
    color: white;
    font-size: 18px;
}

.submit:hover {
    background-color: #8766ff;
    transform: scale(1.1);
}

我无法摆脱这个“焦点”事件，它既不是边框也不是边距。而且它只出现在 Chrome 中。

我怎样才能摆脱这个焦点边框？

Answer 1

您看到的边框是outline。

边框和轮廓非常相似。但是，轮廓与边框在以下方面有所不同：

• 轮廓从不占用空间，因为它们是在元素内容之外绘制的。
• 根据规范，虽然通常是矩形，但轮廓不一定是矩形。

你可以像这样删除它：

.submit:focus {
  outline: none;
}