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 {

svg/search-cancel.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#F1F5F9" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>

tailwind.config.js

@@ -7,6 +7,10 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss/plugin')(({ addVariant }) => {
+      addVariant('search-cancel', '&::-webkit-search-cancel-button');
+    }),
+  ],
 }