From 0371baabcb178ffc4fd6afd5822aeba65dc2b1ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Epif=C3=A2nio=20Francisco?= <epifaniofrancisco03@gmail.com>
Date: Fri, 23 Jan 2026 07:51:00 +0100
Subject: [PATCH] fix(site): hide native search input clear "X" icon (#3933)

* fix(site): hide native search input clear "X" icon

Hide the browser's default clear "X" icon for search inputs to prevent duplicate icons when using the custom clear button. This resolves issue #3925

* style(site): adjust clear button position in input component for mobile

* fix(site): adjust clear button position for Mac in search input
---
 .../theme/components/base/Input.vue           | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/base/Input.vue b/docs/.vitepress/theme/components/base/Input.vue
index 33134c9b9..1bac147ba 100644
--- a/docs/.vitepress/theme/components/base/Input.vue
+++ b/docs/.vitepress/theme/components/base/Input.vue
@@ -35,6 +35,8 @@ const updateShortcutSpacing = () => {
   });
 };
 
+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
 onMounted(updateShortcutSpacing);
 watch(() => props.shortcut, updateShortcutSpacing);
 
@@ -73,6 +75,7 @@ defineExpose({
       v-if="type === 'search' && modelValue"
       class="clear-button"
       aria-label="Clear input"
+      :style="{ right: isMac ? '50px' : '68px' }"
     >
       <Icon
         :iconNode="x"
@@ -126,7 +129,7 @@ defineExpose({
 
 .clear-button {
   position: absolute;
-  right: 56px;
+  right: 68px;
   top: 9px;
   padding: 4px;
   transition: background-color .25s;
@@ -149,10 +152,32 @@ defineExpose({
   pointer-events: none;
 }
 
+.input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+.input[type="search"]::-ms-clear {
+  display: none;
+}
+
+.input[type="search"]::-o-clear {
+  display: none;
+}
+
+.input[type="search"]::-moz-clear {
+  display: none;
+}
+
 @media (hover: none) {
   .shortcut {
     display: none;
   }
+
+  .clear-button {
+    right: 16px !important;
+  }
 }
 </style>