diff --git a/src/components/@shared/FormInput/InputElement.module.css b/src/components/@shared/FormInput/InputElement.module.css
index 6fdbf9584..43d96bc45 100644
--- a/src/components/@shared/FormInput/InputElement.module.css
+++ b/src/components/@shared/FormInput/InputElement.module.css
@@ -32,6 +32,32 @@
   opacity: 0.7;
 }
 
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: inline-block;
+  width: 0.7rem;
+  height: 0.7rem;
+  margin-left: 10px;
+  background: linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 43%,
+      var(--color-primary) 45%,
+      var(--color-primary) 55%,
+      rgba(0, 0, 0, 0) 57%,
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(
+      135deg,
+      transparent 0%,
+      transparent 43%,
+      var(--color-primary) 45%,
+      var(--color-primary) 55%,
+      transparent 57%,
+      transparent 100%
+    );
+}
+
 .input[readonly],
 .input[disabled] {
   background-color: var(--background-highlight);
diff --git a/src/components/@shared/FormInput/InputElement.tsx b/src/components/@shared/FormInput/InputElement.tsx
index 343889238..6b8b9414a 100644
--- a/src/components/@shared/FormInput/InputElement.tsx
+++ b/src/components/@shared/FormInput/InputElement.tsx
@@ -30,6 +30,7 @@ const DefaultInput = ({
     className={cx({ input: true, [size]: size, [className]: className })}
     id={props.name}
     {...props}
+    type={props.type === 'text' || props.type === 'url' ? 'search' : props.type}
   />
 )