Как прописать, чтобы Search Bar открывался при нажатии на короткий input?

Question

Нужно чтобы при нажатии на input 200-300px открывалось целое поле, но при нажатии снова не закрывалось. Тоесть как прописать команду, чтобы оно открылось, но допустим пользователь ткул случайно ещё раз и оно не закрывалось, а оставалось во всю длину.

Answer 1

input {
  border: 1px solid white;
  box-sizing: border-box;
  width: 0;
  transition: width 1s linear, border-color 1s step-end;
  transition-delay: 167ms;
  line-height: 2;
}

input:focus {
  border: 1px solid black;
  width: 10em;
  transition: width 1s linear, border-color 1s step-start;
  transition-delay: 0;
  padding: 0 .5em;
}

label {
  display: inline-block;
  width: 2em;
  text-align: center;
  line-height: 2em;
  border: 1px solid;
  border-radius: 50%;
  cursor: pointer;
}

<label for=inp>?</label>
<input id=inp>

Answer 2

const form = document.querySelector('.form')

function setFullWidthControl(e) {
  if (e.target.classList.contains('form__control')) {
    e.target.classList.add('form__control--active')
  }
}

form.addEventListener('click', setFullWidthControl);

* {
  box-sizing: border-box;
}

.form {
  padding: 1em;
}

.form__control {
  display: block;
  width: 200px;
  height: 60px;
  padding: .35em 1em;
  transition: width .3s ease;
  margin-bottom: 1em;
}

.form__control--active {
  width: 100%;
}

<form action="#" class="form">
  <input type="text" class="form__control" placeholder="Enter text">
  <input type="text" class="form__control" placeholder="Enter text">
</form>

БЛОГ НА HUSL

Как прописать, чтобы Search Bar открывался при нажатии на короткий input?

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