Create a 'search field' component for themes

doc/_themes/sphinx13/layout.html

@@ -32,7 +32,7 @@ <h3>{{ _('Navigation') }}</h3>
 {%- block content %}
 <div class="document">
   <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
-    {%- include "searchbox.html" %}
+    {%- include "searchfield.html" %}
     <div class="sphinxsidebar-navigation__contents">
       <h3>{{ _('On this page') }}</h3>
       {{ toc }}

doc/_themes/sphinx13/static/sphinx13.css

@@ -68,6 +68,7 @@ div.sphinxsidebar {
     overflow-wrap: break-word;
     margin: 0;
     padding-right: 15px;
+    padding-top: 0.5em;
     font-size: 1em;
 }
 
@@ -127,6 +128,10 @@ div.sphinxsidebar li.current > a {
     display: none;
 }
 
+div.sphinxsidebar #searchbox {
+    margin: 12px 0 20px 0;
+}
+
 div.footer {
     background-color: var(--colour-sphinx-blue);
     color: #ccc;

sphinx/themes/basic/searchfield.html

@@ -0,0 +1,23 @@
+{#
+    basic/searchfield.html
+    ~~~~~~~~~~~~~~~~~~~~~~
+
+    Sphinx sidebar template: search field.
+    This component is similar to searchbox.html but does not include an
+    extra heading ("Quick search"). Instead, it uses a placeholder text
+    in the search field.
+
+    :copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+{%- if pagename != "search" and builder != "singlehtml" %}
+<div id="searchbox" style="display: none" role="search">
+    <div class="searchformwrapper">
+    <form class="search" action="{{ pathto('search') }}" method="get">
+      <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search"/>
+      <input type="submit" value="{{ _('Go') }}" />
+    </form>
+    </div>
+</div>
+<script>document.getElementById('searchbox').style.display = "block"</script>
+{%- endif %}