How to make input expand on both sides?

user_12829389 0
Viewed 406

I have an input bar with the css below. Every time it is selected it is supposed to expand. However, it only expands to the left side and not to the right side. (I want it to expand on the right side) This is probably a duplicate so if it is, please mark it as one. However, I just could not find anything that tells me how to do this?

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%; 
}
css html
3 Answers

Wrap search input with div and define text-align:center on wrapped div.
Follow below snippet:

.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>

user_70529270

I have edited your code. check it.

#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>

user_108740880

I would recommend using the scaleX transformation which will handle allow expanding on both sides.

scaleX => Defines a scale transformation by giving a value for the X-axis 

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