Javascript Apple.com类似搜索的过渡

我想把我的搜索栏转换成苹果公司的搜索栏，我已经在网上读了很多关于它的帖子。我目前正在使用CSS隐藏和显示元素来创建搜索栏。但搜索栏轮廓和搜索栏背景（白色）仍在显示。我不想显示任何东西，除了搜索图标（就像apple.com）。这有点困难，因为字形图标在输入框中显示为背景图像

我是否需要JS来完全实现该行为？或者是否有某种方法可以使输入框的其余部分不可见

HTML:

---

以下是您只需要使用css3的内容

.search {
    width:30px;
    position:relative;
    top:2px;
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
      -moz-transition: width 0.5s linear !important;
    -webkit-transition: width 0.5s linear !important;
    transition: width 0.5s ease-in-out !important;
}
#search input {
    /*background: none;*/
    /*opacity: 0.1;*/
    width: 30px !important;
    -moz-transition: width 0.5s ease-out !important;
    -webkit-transition: width 0.5s ease-out !important;
    transition: width 0.5s ease-out !important;
    border: 0 !important;
    outline: 0 !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
}
.search:focus {
    /*opacity: 0.9;*/
    width: 200px !important;
    -moz-transition: width 0.5s ease-in-out !important;
    -webkit-transition: width 0.5s ease-in-out !important;
    transition: width 0.5s ease-in-out !important;
    border: default !important;
    background: default !important;
}

<input type="text" class="form-control search left rounded" id="search-bar" placeholder="search" ng-model="search.name"></input>

.search{
宽度：30px；
位置：相对位置；
顶部：2个；
填充：8px 5px 8px 30px；
边框：1px实心#ccc；
背景：白色url(http://i.imgur.com/lFkqn.png)左中无重复；
-moz过渡：宽度0.5s线性！重要；
-webkit过渡：宽度0.5s线性！重要；
过渡：宽度0.5s缓进缓出！重要；
}
#搜索输入{
/*背景：无*/
/*不透明度：0.1*/
宽度：30px！重要；
-moz过渡：宽度0.5s放松！重要；
-webkit过渡：宽度0.5s放松！重要；
过渡：宽度0.5s放松！重要；
边界：0！重要；
大纲：0！重要；
-webkit外观：无！重要；
-moz外观：无！重要；
外观：无！重要；
}
.搜索：焦点{
/*不透明度：0.9*/
宽度：200px！重要；
-moz过渡：宽度0.5s，轻松进出！重要；
-webkit过渡：宽度0.5s，轻松进出！重要；
过渡：宽度0.5s缓进缓出！重要；
边框：默认！重要；
背景：默认！重要；
}

例子
身体{
背景色：#fff；
}
.search-input.search-text{
高度：30px；
边界：0；
颜色：#555；
保证金：0自动；
宽度：25px；
背景：白色url(http://i.imgur.com/lFkqn.png)左中无重复；
过渡：宽度700ms，背景700ms；
-webkit过渡：宽度700ms，背景700ms；
-moz过渡：宽度700ms，背景700ms；
-ms过渡：宽度700ms，背景700ms；
-o型过渡：宽度700ms，背景700ms；
盒影：插入0 1px 1px#444；
-webkit盒阴影：插图0 1px 1px#444；
-moz盒阴影：插入0 1px 1px#444；
-ms盒阴影：插入0 1px 1px#444；
-o形盒阴影：插图0 1px 1px#444；
} 
.搜索输入。搜索文本：焦点{
背景色：#e1f0f3；
宽度：450px；
}

这似乎不起作用。现在，搜索栏甚至对点击都没有响应。也许一把小提琴可以证明这一点？我为这段代码做了一把小提琴，所以请检查一下：它似乎不起作用，但是，你仍然可以看到边框，并且图标在搜索栏中被空白包围。我想把这个搜索栏放在我的灰色导航栏中，这样就会出现白色背景。是否有任何方法可以避免白色背景（使其透明？）很少更改宽度：0px；左侧填充：30px；检查此项是否为透明，您需要查看此

background:transparent url(http://i.imgur.com/lFkqn.png)左中无重复是的，这是我需要的。我不敢相信这是“背景：透明”这样简单的东西。谢谢！=）
.search {
    width:360px;
    position:relative; top:2px; 
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
}

#search input {
 /*background: none;*/
 /*opacity: 0.1;*/
 width: 30px !important;
 -moz-transition: width 0.5s ease-out !important;
 -webkit-transition: width 0.5s ease-out !important;
 transition: width 0.5s ease-out !important;
 border: 0 !important;
    outline: 0 !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;

}
#search input:focus {
  /*opacity: 0.9;*/
 width: 200px !important;
 -moz-transition: width 0.5s ease-out !important;
 -webkit-transition: width 0.5s ease-out !important;
 transition: width 0.5s ease-out !important;
 border: default !important;
 background: default !important;
}

.search {
    width:30px;
    position:relative;
    top:2px;
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
      -moz-transition: width 0.5s linear !important;
    -webkit-transition: width 0.5s linear !important;
    transition: width 0.5s ease-in-out !important;
}
#search input {
    /*background: none;*/
    /*opacity: 0.1;*/
    width: 30px !important;
    -moz-transition: width 0.5s ease-out !important;
    -webkit-transition: width 0.5s ease-out !important;
    transition: width 0.5s ease-out !important;
    border: 0 !important;
    outline: 0 !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
}
.search:focus {
    /*opacity: 0.9;*/
    width: 200px !important;
    -moz-transition: width 0.5s ease-in-out !important;
    -webkit-transition: width 0.5s ease-in-out !important;
    transition: width 0.5s ease-in-out !important;
    border: default !important;
    background: default !important;
}

<input type="text" class="form-control search left rounded" id="search-bar" placeholder="search" ng-model="search.name"></input>

<!doctype html>
 <html>
  <head>
    <title>example</title>
    <style type="text/css">
      body{
          background-color: #fff;
          }
     .search input.search-text{
          height: 30px;
          border: 0;
          color: #555;
          margin: 0 auto;
          width:25px;
          background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
          transition: width 700ms ,background 700ms;    
          -webkit-transition: width 700ms ,background 700ms;
          -moz-transition: width 700ms ,background 700ms;
          -ms-transition: width 700ms ,background 700ms;
          -o-transition: width 700ms ,background 700ms;

           box-shadow: inset 0 1px 1px #444;
          -webkit-box-shadow: inset 0 1px 1px #444;
          -moz-box-shadow: inset 0 1px 1px #444;
          -ms-box-shadow: inset 0 1px 1px #444;
          -o-box-shadow: inset 0 1px 1px #444;



      } 
       .search input.search-text:focus{
            background-color: #e1f0f3;
            width:450px;




       }

   </style>
 </head>
    <body>
      <center>
       <div class="search">
          <input class="search-text" type="text" />
       </div>
     </center>
  </body>
</html>