3

I'm trying to change the default purple colour of the dropdown arrow in an mdc-select:

mdc-select with purple dropdown arrow

None of the sass mixins seem to do it.

How is it done?

Here is what I have tried so far:

HTML

<div class="mdc-select mdc-select--outlined">
    <input type="hidden" name="enhanced-select">
    <i class="mdc-select__dropdown-icon"></i>
    <div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
        <ul class="mdc-list">
            <li class="mdc-list-item" data-value="41" role="option">41</li>
            <li class="mdc-list-item" data-value="42" role="option">42</li>
            <li class="mdc-list-item" data-value="43" role="option">43</li>
        </ul>
    </div>
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch">
            <label class="mdc-floating-label">Answer to Life</label>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
    </div>
</div>

SCSS

@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";

.mdc-select {
    @include mdc-select-ink-color(red);
    // @include mdc-select-container-fill-color(red);
    @include mdc-select-label-color(red);
    @include mdc-select-focused-label-color(red);
    @include mdc-select-bottom-line-color(red);
    @include mdc-select-focused-bottom-line-color(red);
    @include mdc-select-hover-bottom-line-color(red);
    @include mdc-select-outline-color(red);
    @include mdc-select-focused-outline-color(red);
    @include mdc-select-hover-outline-color(red);
    @include mdc-select-icon-color(red);
}

TS

import { MDCSelect } from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));
nuxibyte
  • 1,434
  • 1
  • 13
  • 16

3 Answers3

5

this is not a icon or font this arrow is a background image of class .mdc-select--focused .mdc-select__dropdown-icon. you can change the image color by using filter css property.

filter: hue-rotate(60deg);

apply this css to your custom css for the class .mdc-select--focused .mdc-select__dropdown-icon it will work.

Thank You.

KuldipKoradia
  • 3,005
  • 7
  • 20
  • Perfect. Thanks! – nuxibyte Sep 10 '19 at 12:41
  • Just for the record, in case anyone else turns up here searching for something similar, I just used red as an example for the question thinking it would be the same for all colours. I actually wanted to make the dropdown arrow grey and I found `filter: grayscale(1);` which works for me. Thanks again. I did not know about css filters. – nuxibyte Sep 10 '19 at 12:59
1

I managed to theme it by using an MDC internal Sass mixin: mdc-select-dd-arrow-svg-bg_. An example is:

.mdc-select .mdc-select__dropdown-icon {
    @include mdc-select-dd-arrow-svg-bg_(COLOR, 1);
}

where COLOR is an MDC theme property (e.g. 'secondary') or an HTML color (e.g. #ff0000). It cannot be a var because, as pointed by @KuldipKoradia, an SVG is generated at compilation time.

Stéphane Magnenat
  • 25
  • 2
0

The easiest and simplest way is to hide the SVG and just create your own dropdown arrow through CSS (no HTML changes needed). Then you can easily change the color as often as you need to:

.mdc-select__dropdown-icon{
  background: none;
  width: 0;
  height: 0;
  bottom: 24px;
  right: 10px;  
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333333;
}
.mdc-select--activated .mdc-select__dropdown-icon,
.mdc-select--focused .mdc-select__dropdown-icon {
  border-top: 5px solid #FF0000;
}
Heath
  • 3
  • 1