Как мне переместить этот значок поиска справа от фокуса, чтобы он соответствовал полю ввода?

Question

Я пытаюсь сделать расширяющуюся панель поиска в фокусе и переместить значок вправо по мере расширения поля ввода. Примерно так:

Где красный квадрат - значок поиска. Это код на данный момент:

.container {
  display: flex;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1280px;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: row;
}

.nav-item {
  display: flex;
  align-items: center;
  margin: 0 20px;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.search-container {
  position: relative;
  margin: 4px 2px;
  height: 50px;
  width: 50px;
  vertical-align: bottom;
}

.search-button {
  color: #fff;
}

.search {
  position: absolute;
  top: 0;
  left: auto;
  right: 49px;
  background-color: black;
  outline: none;
  border: 2px solid red;
  padding: 0;
  width: 0;
  height: 100%;
  z-index: 2;
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
}

.search:focus {
  width: 363px;
  padding: 0 0 0 16px;
}

.search:focus+.search-button {
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  background-color: white;
  color: black;
  left: 363px;
}

<div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a href="/">
        <img src="/logo.png">
      </a>
    </li>
  </ul>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Shop</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
  <form>
    <input class="search" id="search" type="search" name="q" placeholder="Search">
    <label class="search-button" for="search"><i class="icon"></i>SI</label>
  </form>
</div>

В фокусе оно уже расширяет поле ввода. Что мне нужно изменить здесь, чтобы это работало, чтобы значок следовал за вводом и оставался сверху, как на картинке выше?

Answer 1

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

.search-wrapper {
  max-width:30px;
  margin-left: auto;
  margin-right: 100px;
  direction: rtl; /* this is important for the trick */
}
.search-container {
  position: relative;
  display:inline-block; /* This one is also important to allow the  element to overflow */
  height: 50px;
}

.search-button {
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 40px;
  background: blue;
  color: #fff;
  text-align: center;
}

.search {
  background-color: black;
  outline: none;
  border: 2px solid red;
  padding: 0;
  width: 5px;
  height: 100%;
  transition-duration: 0.4s;
  direction: ltr;  /* we reset the direction here */
}

.search:focus {
  width: 363px;
  padding: 0 0 0 50px;
}

.nav {
  display: flex;
  flex-direction: row;
}

.nav-item {
  display: flex;
  align-items: center;
  margin: 0 20px;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.container {
  display: flex;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1280px;
}

<div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Shop</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
  <div class="search-wrapper">
    <form class="search-container">
      <input class="search" id="search" type="search" name="q" placeholder="Search">
      <label class="search-button" for="search"><i class="icon">SI</i></label>
    </form>
  </div>
</div>