From e9cb9b94f219e43c2d6e49ca30cd7719817cbf9a Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Tue, 21 Jan 2025 18:14:40 +0530 Subject: [PATCH] fix: Add consistent color for placeholder --- .../input-control/styles/input-control-styles.tsx | 10 ++++++++++ packages/components/src/text-control/style.scss | 14 ++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index db24a5e60f137..12ccfae4257cc 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -286,6 +286,16 @@ export const Input = styled.input< InputProps >` &::-webkit-input-placeholder { line-height: normal; + color: ${ COLORS.ui.darkGrayPlaceholder }; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: ${ COLORS.ui.darkGrayPlaceholder }; + } + + &:-ms-input-placeholder { + color: ${ COLORS.ui.darkGrayPlaceholder }; } &[type='email'], diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index 5ae2a90b82773..8099d9fd554a5 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -27,4 +27,18 @@ padding-left: $grid-unit-15; padding-right: $grid-unit-15; } + + // Use opacity to work in various editor styles. + &::-webkit-input-placeholder { + color: $dark-gray-placeholder; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: $dark-gray-placeholder; + } + + &:-ms-input-placeholder { + color: $dark-gray-placeholder; + } }