Как сделать так, чтобы ввод расширялся с обеих сторон?

Question

У меня есть строка ввода с css ниже. Каждый раз, когда он выбран, он должен расширяться. Тем не менее, он распространяется только на левую сторону, а не на правую сторону. (Я хочу, чтобы это расширилось на правой стороне) Это, вероятно, дубликат, поэтому, если это так, отметьте его как единое целое. Тем не менее, я просто не мог найти ничего, что говорит мне, как это сделать?

html:

<input placeholder = "search something up"id = "searchbar" name = "search">

css:

#searchbar{
  margin-left: 10px;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  position: relative; top: 0; left: 0;
  width: 178px;
  height: 21px;
  outline: none;
  border: 1px solid #CCCCCC;

  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#searchbar:focus{
  width: 100%;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  width: 300px;
  height: 21px;
  border: 1px solid #CCCCCC;
  top: 0;
  right: 100%; 
}

Answer 1

Обтекание поиска input с помощью div и определение text-align:center для обернутого div.
Следуйте приведенному ниже фрагменту:

.input-wrap{
  text-align: center;
}	
#searchbar{
  background: #FFF;
  padding: 1px 1px 1px 5px;
  position: relative; top: 0; left: 0;
  width: 178px;
  height: 21px;
  outline: none;
  border: 1px solid #CCCCCC;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  text-align: center;
}
#searchbar:focus{
  width: 100%;
  width: 300px;
}

<div class="input-wrap">
  <input type="text" name="search" id="searchbar" placeholder="Search">
</div>

Answer 2

Я отредактировал твой код. проверьте это.

#searchbar{
  margin-left: 50px;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  position: relative; top: 0; left: 0;
  width: 178px;
  height: 21px;
  font-size: 12px;
  outline: none;
  border: 1px solid #CCCCCC;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#searchbar:focus{
  background: #FFF;
  padding: 1px 1px 1px 5px;
  height: 21px;
  border: 1px solid #CCCCCC;
  top: 0;
  right: 100%; 
  font-size: 14px;
  transform: scalex(1.2);
  font-stretch: ultra-condensed;
}

<div class="input-wrap">
  <input type="text" name="search" id="searchbar" placeholder="Search">
</div>

Answer 3

Я бы порекомендовал использовать преобразование scaleX, которое будет обрабатывать расширение с обеих сторон.

scaleX => Определяет преобразование масштаба, задавая значение для оси X

#searchBar:focus{
   .
   .
   .
   transform:scaleX(scaleValue);
}