Отображение кнопки при введенном значении для поиска

CSS-селектор :placeholder-shown может изменять текстовое поле ввода(<input placeholder=»…»>) в зависимости от его состояния. Это один из немногих CSS-селекторов, которые могут реагировать на инициируемое посетителем состояние. К таким селекторам относятся:hover,:checked и :focus-within.

Его также можно без проблем использовать для проверки заполнения посетителем поля ввода поиска. Если оно заполнено, то выводим кнопку. Если нет, то оставляем скрытой. Реализации этого примера начнем с HTML формы поиска:

<form action="#" method="GET" class="search-form"> <!—- Добавим настоящую метку --> <label for="search" class="screen-reader-text">Search</label> <input id="search" type="search" class="search-input" placeholder="Enter search terms..."> <button class="search-button">Search</button></form>

Для скрытия label используем специальный класс, оставив его видимым только для программ чтения с экрана. А кнопку поиска скроем, разместив ее за границами формы.

.search-form { --searchButtonWidth: 75px; overflow: hidden; position: relative;}.search-input { /* занимаем всю ширину формы */ width: 100%;}.search-button { position: absolute; /* смещаем кнопку поиска за пределы формы */ left: 100%; width: var(--searchButtonWidth);}

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

/*... */.search-input:not(:placeholder-shown) ~.search-button { /* возвращаем назад, рассчитав отрицательное значение */ transform: translateX(calc(-1 * var(--searchButtonWidth)));}.search-button { position: absolute; left: 100%; width: var(--searchButtonWidth); /* анимация */ transition: 0.2s;}

Пример реализации

Я позаимствовал эту идею здесь. В этом механизме меня заинтриговала функция обработки состояния непосредственно в CSS. К тому же данный подход обладает хорошей кроссбраузерностью.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *