Whenever I click on the input field, it expands, which is really cool. However, when I click on the submit button, it shrinks back down. How can I make sure it stays expanded?
Here is the HTML code:
<div class="search-container">
<input class="from-control" id="searchTerm" name="textarea"
type="search" placeholder="Search">
<button class="btn btn-success btn-xs" type="button" name="button"
id="search">Search</button>
</div>
And here is the CSS code:
.search-container {
margin-top: 25px;
}
.from-control {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
width: 124px;
height: 35px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
input.from-control:focus {
width: 40vmax;
border: 1px solid #ccc;
}