From a5d1823823acb38179dd10ec43be2930d06d15bc Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Fri, 12 Jul 2019 11:59:07 -0400
Subject: [PATCH] Fixed placeholder text color for more browsers (#2113)

* Make mixin for placeholder and use in disabled
---
 CHANGELOG.md                     |  1 +
 src/components/form/_mixins.scss | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24166220653..d2431ed4db4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Removed time from default `dateFormat` of `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 - Fixed `EuiPopover` from catching and preventing propagation of keydown events when closed ([#2089](https://github.com/elastic/eui/pull/2089))
 - Fixed padding sizes between `EuiModal` header, body, and footer ([#2088](https://github.com/elastic/eui/pull/2088))
+- Fixed placeholder text color for more browsers ([#2113](https://github.com/elastic/eui/pull/2113))
 
 **Deprecations**
 
diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
index 0e0791f1fc7..a9ef3a83969 100644
--- a/src/components/form/_mixins.scss
+++ b/src/components/form/_mixins.scss
@@ -1,3 +1,12 @@
+@mixin euiPlaceholderPerBrowser {
+  // sass-lint:disable-block no-vendor-prefixes
+  // Each prefix must be it's own content block
+  &::-webkit-input-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::placeholder { @content; }
+}
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
@@ -19,7 +28,8 @@
   line-height: 1em; // fixes text alignment in IE
   color: $euiTextColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiColorDarkShade;
   }
 }
@@ -132,7 +142,8 @@
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiFormControlDisabledColor;
   }
 }