在 WordPress Elementor 表单中的提交按钮上获取不一致的样式（颜色）

Question

我的提交按钮上的颜色样式是一个小问题（典型的网页设计）。我在 WordPress 中使用带有 OceanWP 主题的页面构建器 Elementor。站点 URL 是 http://catalystweb.design（当然正在建设中）

问题是 :active 和 :focus 状态下的颜色似乎 "muted"。它们正在被应用，但没有充满活力。

我正在链接到问题的 brief screencast（12 秒），并包括我专门插入到该页面的自定义 CSS。仅供参考，似乎需要 !important 标志来覆盖某些 theme/builder 样式，这使得它们在这种情况下未完全应用的原因更加令人困惑。

您会看到按钮的悬停状态显示我设置的颜色；但是在 :focus （使用标签）上它们被静音，并且在 :active （单击时）上也是如此。

button[type=submit]:focus {
  border: 2px solid #63C1FF !important;
  background: #ffffff !important;
  color: #63C1FF !important;
}
button[type=submit]:active {
  border: 2px solid #ffffff !important;
  background: #63C1FF !important;
  color: #ffffff !important;
}

谢谢，任何见解都值得赞赏！

Answer 1

您的样式表在这里：http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8

悬停时有不透明度设置：

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    color: #fff;
    opacity: .9;
}

你想如何修复这取决于你，但我不建议使用 !important; 如果你可以避免它：

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    opacity: 1 !important;
}

会起作用，或者更好的方法，例如

button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
    opacity: 1;
}

会起作用。您可以将它放在您的主样式表或自定义程序的附加 CSS 中，或者您添加自定义 CSS.

的任何地方

在 WordPress Elementor 表单中的提交按钮上获取不一致的样式（颜色）

Getting inconsistent styling (colors) on submit button in WordPress Elementor form

css

wordpress

forms

submit-button

elementor