Question

我想像Apple.com那样使我的搜索栏转换，我在网上阅读了很多关于它的帖子。我目前正在使用CSS来隐藏和显示元素来创建搜索栏。但搜索栏大纲和搜索栏背景（白色）仍在显示。我想除了搜索glyphicon之外什么都不显示（就像apple.com一样）。由于glyphicon在输入框内显示为背景图像，因此有点困难。

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

HTML：

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

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 {
 /*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;
}

Answer 1

以下是仅使用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>

Answer 2

<!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>

Apple.com像Transitions一样搜索

2 个答案: