Fixed Safari’s rendering of search inputs

elastic · Jun 5, 2018 · 8213645 · 8213645
1 parent 30f58c3
commit 8213645
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Fixed `EuiComboBox` hidden input focus styles ([#894](https://github.com/elastic/eui/pull/894))
 - Fixed responsive widths of `EuiDescribedFormGroup` ([#894](https://github.com/elastic/eui/pull/894))
 - Fixed descenders being cut off in `EuiSelect` ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed extra spacing applied by Safari to `EuiFieldSearch` ([#894](https://github.com/elastic/eui/pull/894))
 
 ## [`0.0.51`](https://github.com/elastic/eui/tree/v0.0.51)
 

diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss
@@ -1,9 +1,16 @@
+/*
+ * 1. Fix for Safari to ensure that it renders like a normal text input
+ *    and doesn't add extra spacing around text
+ */
+
 .euiFieldSearch {
   @include euiFormControlStyle;
   @include euiFormControlWithIcon($isIconOptional: false);
   @include euiFormControlIsLoading;
-  // This is a hack, since in Safari the search boxes were ignoring
-  // padding. Get Dave Snider involved. It improves rendering significantly
-  // although the padding still looks a bit off.
-  -webkit-appearance: textfield;
+
+  -webkit-appearance: textfield; /* 1 */
+
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;  /* 1 */
+  }
 }