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

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;
}

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

0

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

Данная публикация представляет собой перевод статьи «Show Search Button when Search Field is Non-Empty» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню