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

Question

我正在使用下面的代码创建一个 google 搜索栏，它作为 w3.css 导航栏项目的一部分在焦点上扩展，它在 focus/returns 上运行并在模糊上扩展然而，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>

Answer 2

还有另一种简单的方法，无需更多努力。

$(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>

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

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

html

javascript

css

w3.css