light search

@@ -9,14 +9,21 @@ var $searchBox = $('.search-box'),
     $indexSearch = $('.index-search'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
     $indexLogo = $('.index-logo');
 
 
-var $search = $searchBox.children('input'),
-    $cancelSearch = $indexSearch.children('.no-search');
+var $search = $searchBox.children('input[type="text"]'),
+    $cancelSearch = $indexSearch.children('.no-search'),
+    $searchIcon = $searchBox.children('.search-icon');
 
 
 require('../common');
 require('../common');
 
 
 $search.on('focus', function() {
 $search.on('focus', function() {
     $indexSearch.addClass('action');
     $indexSearch.addClass('action');
     $indexLogo.addClass('action');
     $indexLogo.addClass('action');
+}).on('input', function() {
+    if ($search.val() === '') {
+        $searchIcon.addClass('empty');
+    } else {
+        $searchIcon.removeClass('empty');
+    }
 });
 });
 
 
 $cancelSearch.on('touchstart', function() {
 $cancelSearch.on('touchstart', function() {

@@ -81,7 +81,11 @@
             }
             }
             .search-icon {
             .search-icon {
                 right: 10rem / $pxConvertRem;
                 right: 10rem / $pxConvertRem;
-                color: #e6e6e6;
+                color: #000;
+
+                &.empty {
+                    color: #e6e6e6;
+                }
             }
             }
         }
         }
 
 

@@ -9,7 +9,7 @@
                     <input type="hidden" name="from" value="search">
                     <input type="hidden" name="from" value="search">
                     <input type="text" name="query" placeholder="搜索" autocomplete="off">
                     <input type="text" name="query" placeholder="搜索" autocomplete="off">
                     <span class="iconfont clear-text">&#xe623;</span>
                     <span class="iconfont clear-text">&#xe623;</span>
-                    <span class="iconfont search-icon">&#xe60f;</span>
+                    <span class="iconfont search-icon empty">&#xe60f;</span>
                 </div>
                 </div>
             </form>
             </form>
         </div>
         </div>