From 3f1e96023e5a30824ee67039b0e98df02d863000 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 19 Oct 2018 17:02:55 +0200 Subject: [PATCH] fix(form-field): native select options blending in with dropdown background on a dark theme (#13201) --- src/lib/input/_input-theme.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index ecdd6b0e176..91ff9287f2a 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -26,6 +26,21 @@ @include input-placeholder { color: _mat-control-placeholder-color($theme); } + + // On dark themes we set the native `select` color to some shade of white, + // however the color propagates to all of the `option` elements, which are + // always on a white background inside the dropdown, causing them to blend in. + // Since we can't change background of the dropdown, we need to explicitly + // reset the color of the options to something dark. + @if (map-get($theme, is-dark)) { + option { + color: $dark-primary-text; + } + + option:disabled { + color: $dark-disabled-text; + } + } } .mat-accent .mat-input-element {