任何人都知道如何在焦点上创建平滑的搜索栏扩展（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>

Answer 2

看看这个

body {
  margin: 5%;
}

.search-box {
  -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, -webkit-box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, -webkit-box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s, -webkit-box-shadow 0.6s;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: #ebebeb;
}
.search-box + label .search-icon {
  color: black;
}
.search-box:hover {
  color: white;
  background: #c8c8c8;
  -webkit-box-shadow: 0 0 0 5px #3d4752;
          box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
  color: white;
}
.search-box:focus {
  -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 300px;
  border-radius: auto;
  background: #ebebeb;
  color: black;
}
.search-box:focus + label .search-icon {
  color: black;
}
.search-box:not(:focus) {
  text-indent: -5000px;
}

#search-submit {
  position: relative;
  left: -5000px;
}

.search-icon {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search-container" action="//llamaswill.tumblr.com/search">
  <input id="search-box" type="text" class="search-box" name="q" />
  <label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
  <input type="submit" id="search-submit" />
</form>

Answer 3

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

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