diff --git a/client/simple/src/js/main/search.ts b/client/simple/src/js/main/search.ts
index cf42930d1..2ab3ba6d6 100644
--- a/client/simple/src/js/main/search.ts
+++ b/client/simple/src/js/main/search.ts
@@ -14,10 +14,6 @@ const categoryButtons: HTMLButtonElement[] = Array.from(
   document.querySelectorAll<HTMLButtonElement>("#categories_container button.category")
 );
 
-if (searchInput.value.length === 0) {
-  searchReset.classList.add("empty");
-}
-
 // focus search input on large screens
 if (!(isMobile || isResultsPage)) {
   searchInput.focus();
@@ -35,15 +31,10 @@ if (isMobile) {
   });
 }
 
-listen("input", searchInput, () => {
-  searchReset.classList.toggle("empty", searchInput.value.length === 0);
-});
-
 listen("click", searchReset, (event: MouseEvent) => {
   event.preventDefault();
   searchInput.value = "";
   searchInput.focus();
-  searchReset.classList.add("empty");
 });
 
 for (const button of categoryButtons) {
diff --git a/client/simple/src/less/noscript.less b/client/simple/src/less/noscript.less
new file mode 100644
index 000000000..84b963667
--- /dev/null
+++ b/client/simple/src/less/noscript.less
@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.hide_if_nojs {
+  display: none !important;
+}
+
+.show_if_nojs {
+  display: inline !important;
+}
diff --git a/client/simple/src/less/search.less b/client/simple/src/less/search.less
index 260f5e942..4951c2506 100644
--- a/client/simple/src/less/search.less
+++ b/client/simple/src/less/search.less
@@ -164,14 +164,14 @@ button.category_button {
   &:hover {
     color: var(--color-search-background-hover);
   }
-
-  &.empty * {
-    display: none;
-  }
 }
 
-html.no-js #clear_search.hide_if_nojs {
-  display: none;
+#q:placeholder-shown ~ #clear_search {
+  pointer-events: none;
+
+  * {
+    display: none;
+  }
 }
 
 #q,
@@ -204,12 +204,6 @@ html.no-js #clear_search.hide_if_nojs {
   }
 }
 
-.no-js #clear_search,
-.no-js #send_search {
-  width: auto !important;
-  .ltr-border-left(1px solid var(--color-search-border));
-}
-
 .search_filters {
   margin-top: 0.6rem;
   .ltr-margin-right(0);
diff --git a/client/simple/src/less/toolkit.less b/client/simple/src/less/toolkit.less
index c3443934c..592a729ed 100644
--- a/client/simple/src/less/toolkit.less
+++ b/client/simple/src/less/toolkit.less
@@ -4,11 +4,7 @@
 
 // stylelint-disable no-descending-specificity
 
-html.no-js .hide_if_nojs {
-  display: none;
-}
-
-html.js .show_if_nojs {
+.show_if_nojs {
   display: none;
 }
 
diff --git a/client/simple/vite.config.ts b/client/simple/vite.config.ts
index 96230281d..2c94f74a5 100644
--- a/client/simple/vite.config.ts
+++ b/client/simple/vite.config.ts
@@ -52,7 +52,8 @@ export default {
         // stylesheets
         ltr: `${PATH.src}/less/style-ltr.less`,
         rtl: `${PATH.src}/less/style-rtl.less`,
-        rss: `${PATH.src}/less/rss.less`
+        rss: `${PATH.src}/less/rss.less`,
+        noscript: `${PATH.src}/less/noscript.less`
       },
 
       // file naming conventions / pathnames are relative to outDir (PATH.dist)
diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html
index 7b2cd6a66..abad3f141 100644
--- a/searx/templates/simple/base.html
+++ b/searx/templates/simple/base.html
@@ -17,6 +17,9 @@
   {% else %}
   <link rel="stylesheet" href="{{ url_for('static', filename='sxng-ltr.min.css') }}" type="text/css" media="screen">
   {% endif %}
+  <noscript>
+    <link rel="stylesheet" href="{{ url_for('static', filename='sxng-noscript.min.css') }}" type="text/css">
+  </noscript>
   {% if get_setting('server.limiter') or get_setting('server.public_instance') %}
   <link rel="stylesheet" href="{{ url_for('client_token', token=link_token) }}" type="text/css">
   {% endif %}
diff --git a/searx/templates/simple/search.html b/searx/templates/simple/search.html
index a91a0a54b..16cc6fb27 100644
--- a/searx/templates/simple/search.html
+++ b/searx/templates/simple/search.html
@@ -7,7 +7,7 @@
     <div id="search_view">
       <div class="search_box">
         <input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}">
-        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span></button>
         <button id="send_search" type="submit" {%- if search_on_category_select -%}name="category_{{ selected_categories[0]|replace(' ', '_') }}"{%- endif -%} aria-label="{{ _('search') }}"><span class="hide_if_nojs">{{ icon_big('search') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
         <div class="autocomplete hide_if_nojs"><ul></ul></div>
       </div>
diff --git a/searx/templates/simple/simple_search.html b/searx/templates/simple/simple_search.html
index 0d95daa28..e1d064075 100644
--- a/searx/templates/simple/simple_search.html
+++ b/searx/templates/simple/simple_search.html
@@ -3,7 +3,7 @@
     <div id="search_view">
       <div class="search_box">
         <input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}">
-        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span></button>
         <button id="send_search" type="submit" aria-label="{{ _('search') }}"><span class="hide_if_nojs">{{ icon_big('search') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
         <div class="autocomplete hide_if_nojs"><ul></ul></div>
       </div>