From baaa4e240c89e62e6b8ad8a26d525d6e73b8ef3c Mon Sep 17 00:00:00 2001
From: Andreas Steinmann <asteinmann@intershop.com>
Date: Thu, 22 Feb 2024 10:05:00 +0100
Subject: [PATCH 1/2] fix: remove default search input field specific elements
 in Chrome

---
 src/styles/components/header/search-container.scss | 9 +++++++++
 src/styles/pages/category/search-result.scss       | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/styles/components/header/search-container.scss b/src/styles/components/header/search-container.scss
index 3e054d643e..5cb173b275 100644
--- a/src/styles/components/header/search-container.scss
+++ b/src/styles/components/header/search-container.scss
@@ -140,10 +140,19 @@
       background: $color-primary;
       border: $border-width-default solid $border-color-default;
 
+      /* removes the 'x' inside the search input in IE */
       &::-ms-clear {
         display: none;
       }
 
+      /* removes the 'x' and other default search elements inside the search input in Chrome */
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration {
+        display: none;
+      }
+
       @include media-breakpoint-down(sm) {
         border: $border-width-default solid $border-color-default;
 
diff --git a/src/styles/pages/category/search-result.scss b/src/styles/pages/category/search-result.scss
index e9a5144fbb..b91cb504f0 100644
--- a/src/styles/pages/category/search-result.scss
+++ b/src/styles/pages/category/search-result.scss
@@ -36,9 +36,18 @@
     line-height: $search-container-height;
     border: $border-width-default solid $border-color-light;
 
+    /* removes the 'x' inside the search input in IE */
     &::-ms-clear {
       display: none;
     }
+
+    /* removes the 'x' and other default search elements inside the search input in Chrome */
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
   }
 
   button {

From 2255c031367b2c79ea27f1d11f2bc8e073f64638 Mon Sep 17 00:00:00 2001
From: Andreas Steinmann <asteinmann@intershop.com>
Date: Thu, 22 Feb 2024 13:32:06 +0100
Subject: [PATCH 2/2] refactor: consolidate styles and apply to
 input[type='search'] in general

---
 src/styles/components/header/search-container.scss | 13 -------------
 src/styles/global/forms.scss                       | 13 +++++++++++++
 src/styles/pages/category/search-result.scss       | 13 -------------
 3 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/styles/components/header/search-container.scss b/src/styles/components/header/search-container.scss
index 5cb173b275..dad7a30356 100644
--- a/src/styles/components/header/search-container.scss
+++ b/src/styles/components/header/search-container.scss
@@ -140,19 +140,6 @@
       background: $color-primary;
       border: $border-width-default solid $border-color-default;
 
-      /* removes the 'x' inside the search input in IE */
-      &::-ms-clear {
-        display: none;
-      }
-
-      /* removes the 'x' and other default search elements inside the search input in Chrome */
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-        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
index 57e1522e2e..35f4405fc2 100644
--- 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
index b91cb504f0..b7eeb61afb 100644
--- a/src/styles/pages/category/search-result.scss
+++ b/src/styles/pages/category/search-result.scss
@@ -35,19 +35,6 @@
     padding-left: 14px;
     line-height: $search-container-height;
     border: $border-width-default solid $border-color-light;
-
-    /* removes the 'x' inside the search input in IE */
-    &::-ms-clear {
-      display: none;
-    }
-
-    /* removes the 'x' and other default search elements inside the search input in Chrome */
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-results-button,
-    &::-webkit-search-results-decoration {
-      display: none;
-    }
   }
 
   button {