From 82136452d24d0a14ba2b36242d0cbe9fb055cb21 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Jun 2018 15:43:36 -0400 Subject: [PATCH] =?UTF-8?q?Fixed=20Safari=E2=80=99s=20rendering=20of=20sea?= =?UTF-8?q?rch=20inputs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../form/field_search/_field_search.scss | 15 +++++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 894de9e67c6..bc842a23326 100644 --- 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 index c19c73010fd..ebb6233ad88 100644 --- 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 */ + } }