Отображение кнопки при введенном значении для поиска
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. К тому же данный подход обладает хорошей кроссбраузерностью.