Remove default Webkit search cancel button

Fixes newly introduced bug where it was visible in the new 404 page. We now remove it everywhere across the site in a single place.
owid · Sep 30, 2024 · f0ecaf4 · f0ecaf4
1 parent 0c44eba
commit f0ecaf4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -89,10 +89,6 @@
                 &:focus-visible {
                     border: $focus;
                 }
-
-                &::-webkit-search-cancel-button {
-                    -webkit-appearance: none;
-                }
             }
 
             &.search-input--empty {

diff --git a/site/owid.scss b/site/owid.scss
@@ -122,6 +122,12 @@
 @import "css/donate.scss";
 @import "./ThankYouPage.scss";
 
+// Remove default Webkit search cancel button.
+// https://stackoverflow.com/a/77190241/9846837
+[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
 /* HACK (Mispy): Fix search autozooming on iPhone Safari.
 http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {

diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -48,10 +48,6 @@ $reset-button-margin: 16px;
     border: none;
     outline: $blue-20 1px solid;
     outline-offset: 0px;
-
-    &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-    }
 }
 
 .search-panel-reset-button {