Как сделать ,чтобы при нажатии на input он становился шире , при нажатии вне него становился обратно маленьким

Question

Например input 50px шириной, а при нажатии на него красиво анимировано расширялся до 100

<input type="text"   placeholder="Города" class="city-filter"   autocomplete="off">

.city-filter{
  width:50px
}

Answer 1

Можно примерно так только на css с использованием transition и псеводкласca :focus

#mytext{
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  font-size: 1em;
  padding: .5em;
  width: 5em;
  transition: width 1s ease;
}

#mytext:focus {
  width: 9em;
}

<input type="text" id="mytext" placeholder="Search..."/>

БЛОГ НА HUSL

Как сделать ,чтобы при нажатии на input он становился шире , при нажатии вне него становился обратно маленьким

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