fix: remove default search input field specific elements in Chrome (#…

…1589)
intershop · Feb 23, 2024 · 1903d09 · 1903d09
1 parent 4353eaf
commit 1903d09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/styles/components/header/search-container.scss b/src/styles/components/header/search-container.scss
@@ -140,10 +140,6 @@
       background: $color-primary;
       border: $border-width-default solid $border-color-default;
 
-      &::-ms-clear {
-        display: none;
-      }
-
       @include media-breakpoint-down(sm) {
         border: $border-width-default solid $border-color-default;
 

diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
@@ -88,6 +88,19 @@ input[type='checkbox'] {
   vertical-align: middle;
 }
 
+/* removes the 'x' inside the search input in IE */
+input[type='search']::-ms-clear {
+  display: none;
+}
+
+/* removes the 'x' and other default search elements inside the search input in Chrome */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}
+
 input.form-check-input {
   margin-top: 0.25rem;
   margin-left: 0;

diff --git a/src/styles/pages/category/search-result.scss b/src/styles/pages/category/search-result.scss
@@ -35,10 +35,6 @@
     padding-left: 14px;
     line-height: $search-container-height;
     border: $border-width-default solid $border-color-light;
-
-    &::-ms-clear {
-      display: none;
-    }
   }
 
   button {