Anyone know how to create smooth search bar expansions on focus (w3.css)

Question

I am using this code below to create a google search bar which expands on focus as part of w3.css navigation bar-item, it functions and expands on focus/returns on blur however all variations of the css for smooth transitions from one size to the next does not effect the search bar at all. It just jumps from small to big. Any suggestions. Thanks in advance!

 input[type=text] { size:20; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }

 <form method="get" action="http://www.google.com/search"> <div class="w3-bar-item w3-right w3-hide-small w3-padding- 1"style="border:2px dotted black;padding:1px;width:15em;"> <table border="0" align="right" cellpadding="0"> <tr><td> <input class="w3-small w3-bar-item" type="text" name="q" size="20" style="color:#808080; maxlength="200" value="Google Search..." onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black'; this.size='25';" onblur="if(this.value!='this.defaultValue')this.value=this.defaultValue;this.size='20';"/> <button type="submit" class="btn btn-primary w3-right w3-small w3-theme-l1 w3-button w3-bar-item "> <i class="fa fa-search"></i> </button> </table> </div> </form>

Answer 1

Just simple add this code.

 .search { border-radius: 5px; border: 1px solid #ccc; padding: 5px; width: 75px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } .search:focus { width: 200px; }

 <div class="search-container"> <input class="search" type="search" placeholder="Search"> </div>

Answer 2

There is another simple way to do it without more efforts.

 $(document).ready(function() { $(".btnSearch, .txtSearch") .on("click", function(e) { $(".txtSearch").animate({ width: "50%" }, 300); }) .on("blur", function(e) { $(".txtSearch").animate({ width: "20%" }, 300); }); });

 *{ font-family:arial; font-size:12px; color:#000000; } .txtSearch { width: 20%; padding:10px; } .btnSearch{ background:#FFFFFF; color:#000000; padding:10px; width:10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="divSearch"> <input type="text" id="txtSearch" name="txtSearch" class="txtSearch" /> <input type="button" id="btnSearch" name="btnSearch" value="Go" class="btnSearch" /> </div>