css - 在 WordPress Elementor 表单中的提交按钮上获取不一致的样式(颜色)

Question

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

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

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

您会看到按钮的悬停状态显示我设置的颜色；但是在 :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 的任何地方。