fix: correct styling for disabling default webkit searchfield button

green-labs · Dec 21, 2022 · 61aad5d · 61aad5d
1 parent 4a72419
commit 61aad5d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/.changeset/metal-keys-do.md b/.changeset/metal-keys-do.md
@@ -0,0 +1,5 @@
+---
+"@greenlabs/formula-components": patch
+---
+
+fix: correct styling for disabling default webkit searchfield button
diff --git a/packages/components/src/TextField/styles.css.ts b/packages/components/src/TextField/styles.css.ts
@@ -283,10 +283,18 @@ export const inputStyle = style({
   borderTopRightRadius: 4,
   borderBottomRightRadius: 4,
   selectors: {
-    [`&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-ms-clear`]:
-      {
-        WebkitAppearance: "none",
-      },
+    [`&::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration`]: {
+      display: "none",
+    },
+    [`&::-ms-clear,
+      &::-ms-reveal`]: {
+      display: "none",
+      width: 0,
+      height: 0,
+    },
     [`${textFieldVariants["line.large"]} &`]: {
       vars: {
         [vars.inputHeight]: "33px",