diff --git a/crates/docs/src/static/index.html b/crates/docs/src/static/index.html
index d36961ff87..13ac9f422a 100644
--- a/crates/docs/src/static/index.html
+++ b/crates/docs/src/static/index.html
@@ -15,7 +15,7 @@
 <body>
 <nav id="sidebar-nav">
     <input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
-    <label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(shortcut: S)</span></label>
+    <label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(press <span id="search-shortcut-key">s</span>)</span></label>
     <div class="module-links">
         <!-- Module links -->
     </div>
diff --git a/crates/docs/src/static/styles.css b/crates/docs/src/static/styles.css
index b25b71c56c..d52b9c43cc 100644
--- a/crates/docs/src/static/styles.css
+++ b/crates/docs/src/static/styles.css
@@ -451,9 +451,17 @@ pre {
 }
 
 #search-link-hint {
-  font-style: italic;
   margin-left: 1em;
-  opacity: 0.7;
+  opacity: 0.6;
+}
+
+#search-shortcut-key {
+  font-family: monospace;
+  border: 1px solid #666;
+  padding: 1px 3px 3px;
+  font-style: normal;
+  border-radius: 4px;
+  line-height: 15px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -480,6 +488,10 @@ pre {
 }
 
 @media only screen and (max-device-width: 480px) and (orientation: portrait) {
+  #search-link-hint {
+    display: none;
+  }
+
   .search-button {
     display: block; /* This is only visible in mobile. */
   }
