Add outline and cancel button to Search input

src/assets/base.css

@@ -208,6 +208,20 @@ select:focus {
   outline: 0.1rem solid var(--color-foreground);
 }
 
+/* Search cancel button */
+::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1.5rem;
+  margin: 0 0.5em;
+  padding: 0.1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  content: url('/x-lg.svg');
+}
+::-webkit-search-cancel-button:hover {
+  background-color: var(--color-border);
+}
+
 /* Components and Helpers */
 
 .bi {

src/components/SearchBar.vue

@@ -16,7 +16,7 @@ const { t } = useI18n(),
     <Transition name="fade">
       <div v-show="show" class="popup">
         <input
-          type="text"
+          type="search"
           aria-label="Search Input"
           :placeholder="t('title.search') + '...'"
           @change="
@@ -45,7 +45,6 @@ const { t } = useI18n(),
   border: none;
   border-radius: inherit;
   background: var(--color-background-mute);
-  outline: none;
   text-align: center;
 }
 </style>