javascript - 任何人都知道如何在焦点上创建平滑的搜索栏扩展(w3.css)

Question

我正在使用下面的代码创建一个谷歌搜索栏，它作为 w3.css 导航栏元素的一部分在焦点上扩展，它在焦点上运行并扩展/在模糊上返回但是 css 的所有变体都用于平滑过渡一个尺寸到另一个尺寸根本不会影响搜索栏。它只是从小跳到大。有什么建议。提前致谢!

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

只需添加这段代码即可。

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