Javascript Apple.com类似搜索的图标和搜索弹出窗口

我正在尝试建立一个类似apple.com的搜索图标，我已经阅读了大多数其他关于这个的帖子。 我使用css进行平滑过渡，并打开和关闭点击搜索扩展。没有js 我目前的问题是，我只想显示搜索图标，没有输入框没有背景色或边框时，框收缩。我只想看到搜索图标，别的什么都不想

这对我来说有点困难，因为搜索图标被放置为搜索栏的背景

有什么建议可以实现这一点吗？我尝试使用js创建和隐藏一个单独的搜索图标，并将其覆盖在输入栏上，但它变得混乱，这不是一个很好的解决方案

请让我知道

小提琴：

---

Will AC first working solution=

我只在小提琴上看到图标。我遗漏了什么？您可以稍微看到搜索输入框的轮廓。此外，输入框的背景色为白色。我的导航栏是灰色的，因此输入框的白色显示出来。这有点难看，因为小提琴的颜色也是白色的；不需要JS。你能在小提琴上给我看吗？css由你决定，但现在你可以：

.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 {
  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 {
  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;
}