Question

我正在尝试建立一个像搜索图标一样的apple.com，我已经阅读了大部分关于此的帖子。我正在使用css进行平滑过渡以及开启和关闭点击搜索扩展。（没有js）我目前遇到的问题是我只想在合同框中显示搜索图标而不显示输入框（没有背景颜色或边框）。（我希望看到搜索图标而不是其他内容）

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

有任何建议如何实现这一目标？我试图使用js来创建和隐藏一个单独的搜索图标并将其覆盖在输入栏上，但它变得混乱，这不是一个很好的解决方案。

请告诉我！

小提琴： http://jsfiddle.net/simonzhu91/go17ab2x/

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

AC是第一个可行的解决方案=）

Apple.com搜索图标和搜索弹出窗口

0 个答案: