diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css
index a27ffe224..dfb222c2a 100644
--- a/public/css/components/searchbar/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -10,6 +10,18 @@
 }
 
 
+.searchbar_input_clear {
+	/* 1rem * 5 / 8 = width of icon */
+	margin-inline-start: calc(-1rem * 5 / 8 - var(--bs-btn-padding-x) * 2 - var(--bs-border-width)) !important;
+	border: 0;
+	margin-inline-end: 1px;
+	z-index: 1;
+}
+.searchbar_input_clear:hover,
+.searchbar_input_clear:focus {
+	color: var(--bs-body-color);
+	background-color: transparent;
+}
 .searchbar_input:focus,
 .searchbar_input:focus ~ .searchbar_input_clear {
 	z-index: 5; /* same as bootstrap .input-group > .form-control:focus */
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index a63365d29..18d596cef 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -98,17 +98,13 @@ export default {
                     :placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
                     :aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
                 >
-				<span
+				<button
 					v-if="searchsettings.searchstr"
-					class="w-0 position-relative searchbar_input_clear"
+					class="searchbar_input_clear btn btn-outline-secondary"
+					@click="clearInput"
 				>
-					<button
-						class="position-absolute top-0 bottom-0 end-0 btn bg-transparent"
-						@click="clearInput"
-					>
-						<i class="fas fa-close"></i>
-					</button>
-				</span>
+					<i class="fas fa-close"></i>
+				</button>
                 <span
                     data-bs-toggle="collapse"
                     data-bs-target="#searchSettings"