При использовании тёмной цветовой схемы Kadence можно столкнуться с неприятным багом: текст внутри формы отображается нормально, пока поле неактивно, но во время ввода становится практически невидимым. Проблема может затронуть:

поле имени;
email;
номер телефона;
обычные текстовые поля;
многострочное поле сообщения;
поля, заполненные автоматически браузером.

Разберём причину и несколько способов исправления: для одного поля, одной формы или всех форм Kadence на сайте.

Как выглядит проблема

В обычном состоянии поле использует светлый цвет текста, подходящий для тёмного фона. После клика по полю активируется состояние :focus, и цвет неожиданно меняется на почти чёрный. Например:

Фон поля: #211a18
Цвет текста до фокуса: #bfafa7
Цвет текста при фокусе: #241e1a

Последние два цвета — фон и активный текст — практически сливаются. Пользователь продолжает вводить текст, но не видит его.

Где возникает ошибка

Проблема обнаружена в стилях блока Kadence Advanced Form. В проверенной версии Kadence Blocks 3.7.8 используется файл:

/wp-content/plugins/kadence-blocks/dist/style-blocks-advanced-form.css

Для активных полей применяется правило приблизительно следующего вида:

.kb-form-basic-style input[type="text"]:focus,
.kb-form-basic-style input[type="email"]:focus,
.kb-form-basic-style input[type="url"]:focus,
.kb-form-basic-style input[type="password"]:focus,
.kb-form-basic-style input[type="search"]:focus,
.kb-form-basic-style input[type="number"]:focus,
.kb-form-basic-style input[type="tel"]:focus,
.kb-form-basic-style textarea:focus {
    color: var(
        --kb-form-text-focus-color,
        var(
            --kb-form-text-color,
            var(--global-palette, #241e1a)
        )
    );
}

Проблемная часть:

var(--global-palette, #241e1a)

В стандартной палитре Kadence используются переменные с номерами:

--global-palette1
--global-palette2
--global-palette3
--global-palette4
--global-palette5
--global-palette9

Переменная без номера:

--global-palette

может отсутствовать. В таком случае браузер использует запасное значение:

#241e1a

На светлом сайте этот цвет выглядит нормально. На тёмном фоне он становится почти невидимым.

Почему проблема появляется только во время набора

В обычном состоянии Kadence использует другое правило:

color: var(
    --kb-form-text-color,
    var(--global-palette5, #555352)
);

В тёмной палитре --global-palette5 обычно содержит подходящий светлый цвет. Но после клика применяется отдельное правило :focus, в котором срабатывает ошибочное запасное значение #241e1a. Поэтому проблема проявляется именно во время набора текста.

Как определить тёмную тему Kadence

При включении тёмной схемы Kadence добавляет элементу <body> класс:

color-switch-dark

Это позволяет применять исправление только в тёмной теме:

body.color-switch-dark {
    /* Стили тёмной темы */
}

Светлая тема при этом не затрагивается.

Вариант 1. Исправить только одно поле

Если необходимо исправить конкретное поле, можно использовать его уникальный ID. Пример для поля сообщения:

body.color-switch-dark
textarea#field329ad1-b5:focus {
    color: var(--global-palette5, #bfafa7) !important;
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;
    opacity: 1 !important;
}

Здесь:

color задаёт цвет введённого текста;
-webkit-text-fill-color нужен для Chrome и Safari;
caret-color задаёт цвет текстового курсора;
opacity: 1 исключает случайное наследование прозрачности.

Этот способ подходит для точечного исправления, но ID блока может измениться после пересоздания формы или её копирования.

Вариант 2. Исправить одну конкретную форму

У каждой Kadence Advanced Form есть собственный ID. Например:

<form
    id="kb-adv-form-622-cpt-id"
    class="kb-advanced-form">

Чтобы исправить все текстовые поля только в этой форме:

body.color-switch-dark
form#kb-adv-form-622-cpt-id
input.kb-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,

body.color-switch-dark
form#kb-adv-form-622-cpt-id
textarea.kb-field:focus,

body.color-switch-dark
form#kb-adv-form-622-cpt-id
select.kb-field:focus {
    color: var(--global-palette5, #bfafa7) !important;
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;
    opacity: 1 !important;
}

Этот код исправит:

имя;
email;
телефон;
текстовые поля;
сообщение;
выпадающие списки.

Чекбоксы, радиокнопки и кнопка отправки не затрагиваются.

Вариант 3. Исправить все Kadence Forms на сайте

Если на сайте несколько форм или планируется добавление новых, лучше использовать глобальный вариант.

/* Все текстовые поля Kadence Forms в тёмной теме */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,

body.color-switch-dark
.kb-form-basic-style
textarea.kb-field:focus,

body.color-switch-dark
.kb-form-basic-style
select.kb-field:focus {
    color: var(--global-palette5, #bfafa7) !important;
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;
    opacity: 1 !important;
}

Исправление автоматически распространяется на:

существующие формы Kadence;
скопированные формы;
формы на других страницах;
новые Kadence Advanced Forms, добавленные позже.

При этом код не затрагивает:

Fluent Forms;
Site Reviews;
WooCommerce;
стандартную форму комментариев WordPress;
формы других плагинов.

Исправление автозаполнения email

У email-полей есть дополнительная особенность. Chrome и Safari могут применять собственные стили автозаполнения:

:-webkit-autofill

Они способны переопределить:

цвет текста;
цвет фона;
цвет курсора.

Поэтому для полноценного исправления нужно добавить отдельный блок:

/* Автозаполнение полей Kadence Forms в тёмной теме */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:hover,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:focus,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--global-palette9, #211a18) inset !important;

    box-shadow:
        0 0 0 1000px var(--global-palette9, #211a18) inset !important;
}

Здесь --global-palette9 используется как фон поля, а --global-palette5 — как цвет текста. Большая внутренняя тень перекрывает стандартный фон автозаполнения Chrome, не изменяя размер поля.

Итоговый код для всего сайта

Для большинства сайтов Kadence достаточно следующего полного решения:

/*
 * Kadence Advanced Form:
 * исправление невидимого текста в тёмной теме
 */

/* Ручной ввод */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,

body.color-switch-dark
.kb-form-basic-style
textarea.kb-field:focus,

body.color-switch-dark
.kb-form-basic-style
select.kb-field:focus {
    color: var(--global-palette5, #bfafa7) !important;
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;
    opacity: 1 !important;
}

/* Автозаполнение Chrome и Safari */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:hover,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:focus,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--global-palette5, #bfafa7) !important;
    caret-color: var(--global-palette5, #bfafa7) !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--global-palette9, #211a18) inset !important;

    box-shadow:
        0 0 0 1000px var(--global-palette9, #211a18) inset !important;
}

Универсальная версия для клиентских сайтов

Если код планируется использовать на разных сайтах Kadence, лучше не привязываться к конкретным цветам проекта.

/*
 * Универсальное исправление Kadence Forms
 * для клиентских сайтов
 */

/* Активные поля */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,

body.color-switch-dark
.kb-form-basic-style
textarea.kb-field:focus,

body.color-switch-dark
.kb-form-basic-style
select.kb-field:focus {
    color: var(--global-palette5) !important;
    -webkit-text-fill-color: var(--global-palette5) !important;
    caret-color: var(--global-palette5) !important;
    opacity: 1 !important;
}

/* Автозаполнение */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:hover,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:focus,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--global-palette5) !important;
    caret-color: var(--global-palette5) !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--global-palette9) inset !important;

    box-shadow:
        0 0 0 1000px var(--global-palette9) inset !important;
}

Эта версия автоматически использует глобальную палитру конкретного сайта:

--global-palette5

для текста и:

--global-palette9

для фона. На другом клиентском сайте значения будут другими, но структура исправления останется той же.

Альтернативный вариант через переменную Kadence

Вместо прямого переопределения color можно определить переменную, которую ожидает сам Kadence:

body.color-switch-dark .kb-form-basic-style {
    --kb-form-text-focus-color: var(--global-palette5);
}

Это наиболее короткое исправление стандартного ручного ввода. Однако оно не всегда решает проблему с автозаполнением браузера. Поэтому практичнее использовать его вместе с отдельным правилом :-webkit-autofill:

/* Цвет текста при фокусе */
body.color-switch-dark .kb-form-basic-style {
    --kb-form-text-focus-color: var(--global-palette5);
}

/* Автозаполнение Chrome и Safari */
body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:hover,

body.color-switch-dark
.kb-form-basic-style
input.kb-field:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--global-palette5) !important;
    caret-color: var(--global-palette5) !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--global-palette9) inset !important;
}

Какой вариант выбрать

Используйте исправление одного поля, если:

проблема возникла только у одного уникального элемента;
вы не хотите менять остальные формы;
у поля должно быть отдельное оформление.

Используйте исправление одной формы, если:

на сайте несколько форм с разным дизайном;
исправление требуется только в определённом разделе;
у формы есть стабильный ID.

Используйте глобальное исправление, если:

на сайте несколько Kadence Forms;
планируется создание новых форм;
все формы используют общую глобальную палитру;
нужен стандартный сниппет для клиентских сайтов.

Куда вставлять CSS

Оптимальный вариант:

Внешний вид → Настроить → Дополнительные CSS

Также код можно разместить:

в дочерней теме;
в WPCodeBox 2;
в менеджере CSS-сниппетов;
в собственном служебном плагине.

Не рекомендуется редактировать файл:

style-blocks-advanced-form.css

внутри Kadence Blocks. После обновления плагина изменения будут потеряны.

Что очистить после добавления кода

После сохранения CSS необходимо:

Очистить кеш Kadence Performance.
Очистить кеш CDN, если используется Cloudflare или другой CDN.
Выполнить жёсткое обновление страницы.
Проверить сайт в режиме инкогнито.
Отдельно проверить автозаполнение email.

Perfmatters очищать обычно не требуется, если он не занимается объединением или обработкой CSS.

Как проверить исправление

Проверять нужно не только внешний вид пустого поля. Для каждой формы выполните следующие действия:

Включите тёмную тему.
Кликните по полю имени.
Введите несколько символов.
Проверьте цвет текста и курсора.
Повторите проверку для email.
Выберите сохранённый email из автозаполнения браузера.
Проверьте телефон, если он есть.
Введите текст в поле сообщения.
Переключитесь обратно на светлую тему.
Убедитесь, что светлая схема не изменилась.

Также стоит проверить:

Chrome;
Safari;
Firefox;
мобильный браузер;
форму после очистки кеша;
форму после обновления Kadence Blocks.

Почему не следует использовать глобальный селектор для всех форм

Можно было бы написать:

body.color-switch-dark input:focus,
body.color-switch-dark textarea:focus {
    color: #ffffff !important;
}

Но так делать нежелательно. Этот код затронет формы других систем:

WooCommerce;
Fluent Forms;
Site Reviews;
комментарии WordPress;
формы входа;
поиск;
сторонние плагины бронирования.

У них могут быть белые поля, собственные палитры или отдельные состояния фокуса. Глобальный белый цвет способен создать новый баг: белый текст на белом фоне. Поэтому исправление следует ограничивать классом Kadence:

.kb-form-basic-style

и полями:

.kb-field

Затрагивает ли это Fluent Forms

Нет. Fluent Forms использует другие классы:

.fluentform
.ff-el-form-control

Исправление Kadence на него не распространяется. Если аналогичная проблема возникнет во Fluent Forms, её нужно диагностировать отдельно. Не следует заранее добавлять Fluent Forms в этот же CSS-сниппет.

Заключение

Причина невидимого текста в Kadence Forms — не кеш, не браузер и не неправильно настроенная тёмная палитра. Ошибка проявляется в состоянии :focus, когда Kadence обращается к отсутствующей переменной:

--global-palette

и использует тёмный запасной цвет:

#241e1a

Самое безопасное решение — переопределить цвет активных полей только внутри Kadence Forms и отдельно обработать автозаполнение браузера. Для сайта с несколькими формами оптимальным будет глобальное исправление:

body.color-switch-dark
.kb-form-basic-style
input.kb-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,

body.color-switch-dark
.kb-form-basic-style
textarea.kb-field:focus {
    color: var(--global-palette5) !important;
    -webkit-text-fill-color: var(--global-palette5) !important;
    caret-color: var(--global-palette5) !important;
}

Оно распространяется на существующие и будущие формы Kadence, автоматически использует глобальную палитру сайта и не вмешивается в оформление форм других плагинов.

В тёмной теме Kadence Forms не виден вводимый текст: причина и способы исправления

Как выглядит проблема

Где возникает ошибка

Почему проблема появляется только во время набора

Как определить тёмную тему Kadence

Вариант 1. Исправить только одно поле

Вариант 2. Исправить одну конкретную форму

Вариант 3. Исправить все Kadence Forms на сайте

Исправление автозаполнения email

Итоговый код для всего сайта

Универсальная версия для клиентских сайтов

Альтернативный вариант через переменную Kadence

Какой вариант выбрать

Куда вставлять CSS

Что очистить после добавления кода

Как проверить исправление

Почему не следует использовать глобальный селектор для всех форм

Затрагивает ли это Fluent Forms

Заключение

Error establishing a Redis connection в WordPress: как мы восстановили сайт на Beget

Как заставить FluentCRM отправлять массовые рассылки через очередь Mail Queue и не убить SMTP-сервер

Пошаговая настройка SEOPress для WordPress-сайта и интернет–магазина WooCommerce

Как вставить счетчик просмотров Post Views Counter в тему Kadence

Как добавить кнопку Telegram в Kadence Simple Share

«Извините, вам не разрешено просматривать эту страницу»…

Добавить комментарий Отменить ответ

Как выглядит проблема

Где возникает ошибка

Почему проблема появляется только во время набора

Как определить тёмную тему Kadence

Вариант 1. Исправить только одно поле

Вариант 2. Исправить одну конкретную форму

Вариант 3. Исправить все Kadence Forms на сайте

Исправление автозаполнения email

Итоговый код для всего сайта

Универсальная версия для клиентских сайтов

Альтернативный вариант через переменную Kadence

Какой вариант выбрать

Куда вставлять CSS

Что очистить после добавления кода

Как проверить исправление

Почему не следует использовать глобальный селектор для всех форм

Затрагивает ли это Fluent Forms

Заключение

Похожие записи

Добавить комментарий Отменить ответ