Horizontally expand input on click with bootstrap animation?

Question

I found some examples of expanding a textarea vertically using bootstrap.

I would like to horizontally expand a text input from this [..] to this [........] on click event with an animation.

Is there something in bootstrap that would simplify this or do I have to roll my own?

Answer 1

I ended up using pure css from codepen by someone named Prinzadi

body {
  background: #fff;
  color: #666;
  font: 90%/180% Arial, Helvetica, sans-serif;
  width: 800px;
  max-width: 96%;
  margin: 0 auto;
}

a {
  color: #69C;
  text-decoration: none;
}

a:hover {
  color: #F60;
}

h1 {
  font: 1.7em;
  line-height: 110%;
  color: #000;
}

p {
  margin: 0 0 20px;
}

input {
  outline: none;
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}

input[type=search] {
  background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
  border: solid 1px #ccc;
  padding: 9px 10px 9px 32px;
  width: 55px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

input[type=search]:focus {
  width: 130px;
  background-color: #fff;
  border-color: #66CC75;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}

input:-moz-placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}


/* Demo 2 */

#demo-2 input[type=search] {
  width: 15px;
  padding-left: 10px;
  color: transparent;
  cursor: pointer;
}

#demo-2 input[type=search]:hover {
  background-color: #fff;
}

#demo-2 input[type=search]:focus {
  width: 130px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

#demo-2 input:-moz-placeholder {
  color: transparent;
}

#demo-2 input::-webkit-input-placeholder {
  color: transparent;
}

<h1>Expandable Search Form</h1>
<p>Pen by <a href="https://twitter.com/prinzadi">Prinzadi</a></p>
<h3>Demo 1</h3>
<form>
  <input type="search" placeholder="Search">
</form>

<h3>Demo 2</h3>
<form id="demo-2">
  <input type="search" placeholder="Search">
</form>