fix ios navbar search button issure | fix #39

common/static/css/boofilsic.css

@@ -510,11 +510,17 @@ select::placeholder {
 
 .navbar .navbar__search-box {
   margin: 0 12% 0 15px;
-  height: 32px;
+  display: inline-block;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
+}
+
+.navbar .navbar__search-box > input[type="search"] {
+  margin: 0;
+  height: 32px;
   background-color: white !important;
+  width: 100%;
 }
 
 .navbar .navbar__dropdown-btn {
@@ -567,6 +573,8 @@ select::placeholder {
   .navbar .navbar__search-box {
     margin: 0;
     width: 46vw;
+  }
+  .navbar .navbar__search-box > input[type="search"] {
     height: 26px;
     padding: 4px 6px;
   }

common/static/sass/_Navbar.sass

@@ -37,9 +37,13 @@
 
     & &__search-box
         margin: 0 12% 0 15px
-        height: 32px
+        display: inline-block
         flex: 1
-        background-color: white !important
+        & > input[type="search"]
+            margin: 0
+            height: 32px
+            background-color: white !important
+            width: 100%
 
     & &__dropdown-btn
         display: none
@@ -87,8 +91,9 @@
         & &__search-box
             margin: 0
             width: 46vw
-            height: 26px
-            padding: 4px 6px
+            & > input[type="search"]
+                height: 26px
+                padding: 4px 6px
 // Medium devices (tablets, 768px and up)
 @media (max-width: $medium-devices)
 	pass

common/templates/partial/_navbar.html

@@ -9,9 +9,10 @@
                 <a href="{% url 'common:home' %}" class="navbar__logo">
                     <img src="{% static 'img/logo.svg' %}" alt="" class="navbar__logo-img">
                 </a>
-
-                <input type="search" class="navbar__search-box" name="q" id="searchInput" required="true"
-                    placeholder="搜索书影音，多个关键字以空格分割">
+                <form action="#" οnsubmit="" class="navbar__search-box">
+                    <input type="search" class="" name="q" id="searchInput" required="true"
+                        placeholder="搜索书影音，多个关键字以空格分割">
+                </form>
                 <button class="navbar__dropdown-btn">• • •</button>
                 <ul class="navbar__link-list">