Получение несовместимых стилей (цветов) на кнопке отправки в форме WordPress Elementor

Это незначительная, но неприятная проблема (типичный веб-дизайн) с цветовым оформлением моей кнопки отправки. Я использую конструктор страниц Elementor с темой OceanWP в WordPress. URL сайта - http://catalystweb.design (конечно, в стадии разработки)

Проблема в том, что цвета кажутся «приглушенными» в состояниях: active и: focus. Они применяются, но не в полной мере.

Я привожу ссылку на краткий скринкаст (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;
}

Спасибо, ценим любые идеи!


wordpress forms css submit-button elementor
person Mike Peiman    schedule 27.02.2018    source источник
comment
Сложно сказать, не имея всего кода, можете ли вы поделиться ссылкой на страницу с реальной проблемой? Мне кажется, что есть opacity, установленный на: active /: focus с белым фоном на родительском или псевдоэлементе, но, опять же, это трудно сказать без исходного кода.   -  person Xhynk    schedule 28.02.2018
comment
Спасибо, что искали Xhynk, только что добавили URL-адрес в вопрос, и снова здесь: Catalystweb.design. Это определенно какая-то непрозрачность, просто понятия не имею, откуда она взялась.   -  person Mike Peiman    schedule 28.02.2018
comment
Я просмотрел компьютерные таблицы стилей и обнаружил, что к классу .elementor-button применена непрозрачность .9; поэтому я выбрал этот класс с непрозрачностью 1! important. Теперь белый фон проходит через 100% в фокусе, но к тексту, рамке и активному состоянию по-прежнему применяется непрозрачность. Загадочный. Собираюсь сделать перерыв и загляну позже.   -  person Mike Peiman    schedule 28.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Ваша таблица стилей здесь: 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.

person Xhynk    schedule 27.02.2018
comment
Xhynk, большое спасибо за полный ответ. Вы правы в том, что нашли, но оказалось, что проблема не в этом. Но я обнаружил проблему, и это была - барабанная дробь, пожалуйста - человеческая ошибка [фейспалм]. Я смотрел не на ту таблицу стилей и применял неправильный цвет (другой оттенок синего). Я обнаружил, что! Important, к сожалению, необходимы в настраиваемом CSS. Иначе стиль не изменится. Должно быть что-то перекрывается плагином Elementor. - person Mike Peiman; 01.03.2018