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

Question

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

当我单击“Post 评论”按钮时，该按钮显示黑色边框（仅在 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。

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

Outlines never take up space, as they are drawn outside of an element's content.

According to the spec, outlines don't have to be rectangular, although they usually are.

您可以像这样删除它：

.submit:focus {
  outline: none;
}

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

WP hello-elementor theme: Post comment button has a weird border in Chrome

css

wordpress

elementor