diff --git a/media/css/seahub.css b/media/css/seahub.css
index d6a6d99a06..555471e81a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2687,29 +2687,26 @@ button.dropdown-toggle:focus {
 }
 
 /* search */
-.search-form,
-#search-form .input_and_submit {
-    padding-left:5px;
+.search-input {
     height:24px;
+    margin:0;
     border:1px solid #ddd;
     border-radius:3px;
-    background:#fff;
-    position:relative;
 }
-#top-search-form {
-    margin-top:7px;
-}
-.search-input,
-.search-form .search-submit {
-    padding:0;
+.search-form .search-submit { /* the icon submit */
+    position:absolute;
+    right:1px;
+    top:1px;
+    width:30px;
     height:24px;
+    padding:0;
     border:0;
     margin:0;
-    vertical-align:top;
+    background:#fff;
 }
-.search-input {
-    width:155px;
-    outline:0;
+.search-form .icon-search {
+    font-size:16px;
+    color:#aaa;
 }
 .search-form .icon-caret-down {
     color:#bbb;
@@ -2720,15 +2717,15 @@ button.dropdown-toggle:focus {
     position:absolute;
     width:500px;
     padding:18px;
-    height:auto;
+    background:#fff;
+    border:1px solid #ddd;
+    border-radius:3px;
     box-shadow:0 0 10px #ddd;
     z-index:100;/* for pages with jquery tabs*/
 }
 #advanced-search-form .search-input {
     width:98%;
     padding:0 3px;
-    border:1px solid #ddd;
-    border-radius:3px;
 }
 #advanced-search-form .submit {
     margin-bottom:0;
@@ -2756,27 +2753,24 @@ button.dropdown-toggle:focus {
     padding:0 3px;
     width:70%;
 }
-.search-form .search-submit {
-    width:30px;
-    background:#fff;
+#top-search-form {
+    position:relative;
+    margin-top:7px;
 }
-.search-form .icon-search {
-    font-size:16px;
-    color:#aaa;
+#top-search-form .search-input {
+    width:155px;
+    padding: 0 30px 0 5px;
 }
 #search-form,
 #search-user-form,
-#search-repo-form{
+#search-repo-form {
     padding:7px 5px;
-    height:auto;
     background:#f7f7f8;
-    border:0;
     border-radius:2px;
 }
 #search-form .input_and_submit {
     display:inline-block;
-    width:426px;
-    *width:430px;
+    position:relative;
 }
 #search-form .advanced-search {
     color:#666;
@@ -2786,6 +2780,7 @@ button.dropdown-toggle:focus {
 }
 #search-form .search-input {
     width:392px;
+    padding:0 30px 0 5px;
 }
 #search-results {
     padding-top:15px;
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 020a5c9601..9f1fd50802 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -948,9 +948,9 @@
 </script>
 <script type="text/template" id="top-search-form-tmpl">
 <% if (search_repo_id) { %>
-    <input class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" /> <input type="hidden" name="search_repo" value="<%= search_repo_id %>" />
+    <input type="text" class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" /> <input type="hidden" name="search_repo" value="<%= search_repo_id %>" />
 <% } else { %>
-    <input class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
+    <input type="text" class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
 <% } %>
 <!--span class="icon-caret-down" title="{% trans "advanced" %}"></span--><button type="submit" class="search-submit"><span class="icon-search"></span></button>
 </script>
diff --git a/seahub/templates/snippets/search_form.html b/seahub/templates/snippets/search_form.html
index 47d85b39ca..2b884e5b10 100644
--- a/seahub/templates/snippets/search_form.html
+++ b/seahub/templates/snippets/search_form.html
@@ -1,16 +1,16 @@
 {% load i18n %}
                 <form id="top-search-form" method="get" action="{% url 'search' %}" class="search-form fleft">
                     {% if search_repo_id %}
-                    <input class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" />
+                    <input type="text" class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" />
                     <input type="hidden" name="search_repo" value="{{ search_repo_id }}" />
                     {% else %}
-                    <input class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
+                    <input type="text" class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
                     {% endif %}
                     <!--span class="icon-caret-down" title="{% trans "advanced" %}"></span--><button type="submit" class="search-submit"><span class="icon-search"></span></button>
                 </form>
 
                 <form id="advanced-search-form" method="get" action="{% url 'search' %}" class="search-form hide">
-                    <input class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
+                    <input type="text" class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
                     <div class="search-scales">
                         <div class="search-repos">
                             {% if search_repo_id %}