Google CSE - как правильно сменить стандартный вотермарк?

big boy
На сайте с 18.11.2006
Offline
354
435

Использую Google Custom Search для сайта.

Средствами CSS добился того, чтобы форма поменяла свой вид:

Но возникла проблема. Если кликнуть на форму, то фоновая картинка "Что вы ищите?" исчезает (вступает в силу правило :focus). Но допустим если кликнуть на пустую область, то поле уже не в фокусе и фоновое изображение появляется снова и в итоге в поле поиска какаша:

Свою картинку поставил благодаря этой подсказке. Проблема в том, что средствами CSS никак не проверить пустое поле или нет.

Стандартная форма, если не переопределять CSS, работает отлично - если ввести текст, то фон больше не показывается. Код формы подгружается динамично с сервера гугла, поэтому я не могу изменять его напряму и такие штуки вроде

onfocus="if(this.value == 'value') { this.value = ''; }"

или замена прямо в коде их картинки на свою к сожалению не работают.

Заменить форму полностью на свою я не могу, так как включены поисковые подсказки. Мне лишь

доступно id и name формы и инпута. Как-то можно через свой JS создать проверку, с такой логикой:

если поле не пустое > применить CSS правило данному инпуту (добавить class).

если поле пустое > ничего не делать (по дефолту)

Уверен, что это не сложно, может кто-нибудь набросает пример? В JS вообще ни бум-бум.

✔ Как я генерирую статьи через ИИ, которые приносят трафик - https://webmasta.ru/blog/16-vkalyvayut-roboty-ne-chelovek-stati-s-pomoschyu-ii-kotorye-prinosyat-trafik

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий