search cancel

src/market/MarketResultTable.vue

@@ -55,7 +55,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.items
         </div>
         <div class="end">
             <span>Filter: </span>
-            <input type="text" class="w-96" v-model="filter" >
+            <input type="search" class="w-96" v-model="filter" >
         </div>
         <div class="end">
             <button class="flex" @click="$emit('relaodAll')"><ArrowPathIcon class="stroke-slate-100 sh-6 w-6 me-2" />Reload all</button>

src/style.css

@@ -41,6 +41,9 @@
         @apply bg-slate-600 hover:bg-slate-800;
         border-radius: 5px;
     }
+    input[type=search] {
+        @apply search-cancel:appearance-none search-cancel:w-4 search-cancel:h-4 search-cancel:bg-[url('/svg/search-cancel.svg')];
+    }
     .btn-icon {
         @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent;
         > svg {