diff --git a/lib/rdoc/generator/template/rails/_panel.rhtml b/lib/rdoc/generator/template/rails/_panel.rhtml
index 838f6437..a5ac6d1c 100644
--- a/lib/rdoc/generator/template/rails/_panel.rhtml
+++ b/lib/rdoc/generator/template/rails/_panel.rhtml
@@ -14,7 +14,7 @@
   <input id="panel__state" type="checkbox">
 
   <div class="panel__tray">
-    <input id="search" class="panel__search" type="text"
+    <input id="search" class="panel__search" type="search"
       tabindex="-1" autocomplete="off" autosave="searchdoc"
       placeholder="Search (/) for a class, method, ..."
       data-turbo-permanent>
diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css
index 026e9416..4a47dd18 100644
--- a/lib/rdoc/generator/template/rails/resources/css/main.css
+++ b/lib/rdoc/generator/template/rails/resources/css/main.css
@@ -264,20 +264,6 @@ html {
   height: 100dvh;
 }
 
-.panel__search {
-  height: var(--search-height);
-  width: 100%;
-
-  background: url('../i/search.svg') no-repeat;
-  background-position: 0.5em center;
-  padding-left: calc(0.5em + 16px + 0.5em);
-
-  color: inherit;
-
-  border: 0;
-  box-shadow: 1px 1px 4px color-mix(in srgb, currentColor 50%, transparent) inset;
-}
-
 .panel__results, .panel__nav {
   position: relative;
   height: calc(100dvh - var(--banner-height) - var(--search-height));
@@ -310,6 +296,46 @@ html {
 }
 
 
+/*
+ * Navigation panel - Search input
+ */
+
+.panel__search {
+  height: var(--search-height);
+  width: 100%;
+
+  background: url('../i/search.svg') no-repeat;
+  background-size: 1.3em;
+  background-position: 0.5em center;
+  padding-left: calc(0.5em + 1.3em + 0.5em);
+
+  color: inherit;
+
+  border: 0;
+  box-shadow: 1px 1px 4px color-mix(in srgb, currentColor 50%, transparent) inset;
+}
+
+/* Hide native magnifying glass icon in Webkit-based browsers (in favor of our icon) */
+.panel__search::-webkit-search-results-button {
+  -webkit-appearance: none;
+}
+
+/* Display "clear search" button consistently across (Webkit-based) browsers */
+.panel__search::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+
+  margin-right: 0.5em;
+  height: 1.3em;
+  width: 1.3em;
+  background: url('../i/close.svg') no-repeat;
+  background-size: contain;
+}
+
+.panel__search:not(:focus)::-webkit-search-cancel-button {
+  display: none;
+}
+
+
 /*
  * Navigation panel - Search results
  */
diff --git a/lib/rdoc/generator/template/rails/resources/i/search.svg b/lib/rdoc/generator/template/rails/resources/i/search.svg
index 7f4a3652..2e701c06 100644
--- a/lib/rdoc/generator/template/rails/resources/i/search.svg
+++ b/lib/rdoc/generator/template/rails/resources/i/search.svg
@@ -1,12 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>search</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="search" fill="#555555">
-            <path d="M15.7,13.3 L11.89,9.47 C12.59,8.49 13,7.3 13,6 C13,2.69 10.31,0 7,0 C3.69,0 1,2.69 1,6 C1,9.31 3.69,12 7,12 C8.3,12 9.48,11.59 10.47,10.89 L14.3,14.7 C14.49,14.9 14.75,15 15,15 C15.25,15 15.52,14.91 15.7,14.7 C16.09,14.31 16.09,13.68 15.7,13.29 L15.7,13.3 Z M7,10.7 C4.41,10.7 2.3,8.59 2.3,6 C2.3,3.41 4.41,1.3 7,1.3 C9.59,1.3 11.7,3.41 11.7,6 C11.7,8.59 9.59,10.7 7,10.7 L7,10.7 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#777777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>