Как сделать выезжающее поле поиска?

Question

Помогите, пожалуйста, реализовать такое же, выезжающее справа-налево, поле поиска:

В Гугле не нашел. Задавал вопрос на habr, молчат...

Answer 1

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

Если бы автор изначально включил в вопрос больше информации о требуемой логике, то код, возможно, был бы ещё короче.

document.querySelector('.search_wrap').addEventListener('input', function(ev) {
  this.classList.toggle('enter', ev.target.value != '');
});
document.querySelector('.search_clear').addEventListener('click', function(ev) {
  this.previousElementSibling.value=''; this.previousElementSibling.focus();
  this.previousElementSibling.dispatchEvent(new Event('input', {'bubbles': true}));
});

nav { padding: 20px; text-align: right; background-color: #005; }

.search_wrap {
  position: relative; display: inline-block; height: 26px; color: #fff;
}

.search_input {
  height: 24px; width: 22px; padding: 5px 22px 5px 0; box-sizing: border-box;
  outline-width: 0; border: none; border-bottom: 2px solid #fff;
  font: 16px/22px Verdana; background-color: transparent; color: #fff;
  opacity: 0; cursor: pointer; transition: 1s ease-in-out;
}
.enter .search_input, .search_input:focus {
  width: 250px; opacity: 1; cursor: initial;
}

.search_find, .search_clear {
  position: absolute; z-index: 1; top: 0; right: 0; width: 22px;
  text-align: center; pointer-events: none; transition: .8s ease .2s;
}

.search_find { font: 20px/24px Verdana; }
.enter .search_find, .search_input:focus ~ .search_find { transform: scaleX(0); }

.search_clear { font: 24px/24px Verdana; transform: scaleX(0); cursor: pointer; }
.enter .search_clear { transform: scaleX(1); pointer-events: auto; }

<nav>
  <div class="search_wrap">
    <input type="text" class="search_input" placeholder="Type your text here">
    <div class="search_clear">&#215;</div><div class="search_find">&#128269;</div>
  </div>
</nav>

БЛОГ НА HUSL

Как сделать выезжающее поле поиска?

Ответы (1 шт):