Fix search-icon when typing

Author: Subhajit009iitr

layouts/partials/search-input.html

@@ -1,29 +1,40 @@
+  <style> 
+    input[type=text] {
+      box-sizing: border-box;
+      background-color: white;
+      background-image: url('https://www.w3schools.com/css/searchicon.png');
+      background-position: 10px 10px; 
+      background-repeat: no-repeat;
+      padding: 12px 20px 12px 40px;
+    }
+  </style>
+
 {{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
   <input
-    type="search"
+    type="text"
     class="form-control td-search-input"
-    placeholder="&#xf002; {{ T "ui_search_placeholder" }}"
+    placeholder=" {{ T "ui_search_placeholder" }}"
     aria-label="{{ T "ui_search_placeholder" }}"
     autocomplete="off"
   >
 {{ else if .Site.Params.offlineSearch }}
   <div id="search-nav-container">
     <input
-      type="search"
+      type="text"
       id="search-input"
       autocomplete="off"
       class="form-control td-search-input"
-      placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
+      placeholder=" {{ T "ui_search_placeholder" }}"
       autocomplete="off"
     >
     <div id="search-results" class="container"></div>
   </div>
 {{ else if .Site.Params.k8s_search }}
   <input
-    type="search"
+    type="text"
     class="form-control td-search-input"
     name="q"
-    placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
+    placeholder=" {{ T "ui_search_placeholder" }}"
     aria-label="{{ T "ui_search_placeholder" }}"
     autocomplete="off"
   >