Question

这是一个轻微但烦人的问题（典型的网页设计），我的提交按钮上有颜色样式。我在WordPress中使用了具有OceanWP主题的页面构建器Elementor。网站网址为http://catalystweb.design（当然正在建设中）

问题在于颜色似乎是静音的＃34; on：active和：focus states。他们正在应用，但没有充分的活力。

我正在链接到问题的brief screencast（12秒），并且包括我专门插入该页面的自定义CSS。仅供参考！重要标志似乎需要覆盖一些主题/构建器样式，这使得在这种情况下它们未完全应用的原因更加令人费解。

您会看到按钮的悬停状态会传达我设定的颜色;但是：焦点（使用标签）它们被静音，并且相同：激活（点击时）。

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

在悬停时设置了不透明度：

!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; }：

会起作用，或者稍微好一点的方法

@Output

会奏效。您可以将它放在主样式表或自定义程序的附加CSS中，或者在您添加自定义CSS的任何位置。

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

1 个答案: