diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index f6e0b31a6..4b06717ee 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -44,22 +44,27 @@
     color: #888;
     font-size: 140%;
     }
-.cm-search-widget > span {
-    position: relative;
+.cm-search-widget-input {
+    border: 1px solid gray;
+    border-radius: 3px;
+    display: inline-flex;
+    min-width: 16em;
     }
-.cm-search-widget .cm-search-widget-count {
+.cm-search-widget-input > input {
+    border: 0;
+    flex-grow: 1;
+    }
+.cm-search-widget-input > .cm-search-widget-count {
     align-items: center;
-    bottom: 0;
     color: #888;
     display: none;
-    margin-right: 4px;
+    flex-grow: 0;
+    font-size: 80%;
+    padding: 0 0.4em;
     pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
     }
 .cm-search-widget[data-query] .cm-search-widget-count {
-    display: flex;
+    display: inline-flex;
     }
 .cm-search-widget .cm-search-widget-button:hover {
     color: #000;
diff --git a/src/js/codemirror/search.js b/src/js/codemirror/search.js
index 078d0c138..542c340cc 100644
--- a/src/js/codemirror/search.js
+++ b/src/js/codemirror/search.js
@@ -54,8 +54,8 @@
     var searchWidgetHtml =
         '<div class="cm-search-widget">' +
             '<span class="fa">&#xf002;</span>&ensp;' +
-            '<span>' +
-                '<input type="text" size="20">' +
+            '<span class="cm-search-widget-input">' +
+                '<input type="text">' +
                 '<span class="cm-search-widget-count">' +
                     '<span><!-- future use --></span><span>0</span>' +
                 '</span>' +
@@ -211,11 +211,14 @@
                 state.query,
                 queryCaseInsensitive(state.query)
             );
-            var count = state.annotate.matches.length;
+            let count = state.annotate.matches.length;
             state.widget
                  .querySelector('.cm-search-widget-count > span:nth-of-type(2)')
                  .textContent = count > 1000 ? '1000+' : count;
             state.widget.setAttribute('data-query', state.queryText);
+            // Ensure the caret is visible
+            let input = state.widget.querySelector('.cm-search-widget-input > input');
+            input.selectionStart = input.selectionStart;
         }
     }