_form-field-native-select.scss

@use 'sass:map';
@use '../mdc-helpers/mdc-helpers';
@use '../../cdk/a11y';
@use '../../material/core/theming/palette';
@use '../../material/core/style/private';
@use '@material/theme/theme-color' as mdc-theme-color;

// Width of the Material Design form-field select arrow.
$mat-form-field-select-arrow-width: 10px;
// Height of the Material Design form-field select arrow.
$mat-form-field-select-arrow-height: 5px;
// Horizontal padding that needs to be applied to the native select in an form-field so
// that the absolute positioned arrow does not overlap the select content.
$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;

// Mixin that creates styles for native select controls in a form-field.
@mixin private-form-field-native-select() {
  // Remove the native select down arrow and ensure that the native appearance
  // does not conflict with the form-field. e.g. Focus indication of the native
  // select is undesired since we handle focus as part of the form-field.
  select.mat-mdc-form-field-input-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    display: inline-flex;
    box-sizing: border-box;

    // Hides the default arrow native selects.
    &::-ms-expand {
      display: none;
    }

    // By default the cursor does not change when hovering over a select. We want to
    // change this for non-disabled select elements so that it's more obvious that the
    // control can be clicked.
    &:not(:disabled) {
      cursor: pointer;
    }

    // As a part of its user agent styling, IE11 has a blue box inside each focused `select`
    // element which we have to reset. Note that this needs to be in its own selector, because
    // having it together with another one will cause other browsers to ignore it.
    &::-ms-value {
      // We need to reset the `color` as well, because IE sets it to white.
      color: inherit;
      background: none;

      // IE and Edge in high contrast mode reset the color for a focused select to the same color
      // as the background, however this causes it blend in because we've reset the `background`
      // above. We have to add a more specific selector in order to ensure that it gets the
      // `color` from our theme instead.
      @include a11y.high-contrast(active, off) {
        .mat-focused & {
          color: inherit;
        }
      }
    }
  }

  // Native select elements with the `matInput` directive should have Material Design
  // styling. This means that we add an arrow to the form-field that is based on the
  // Material Design specification. We achieve this by adding a pseudo element to the
  // form-field infix.
  .mat-mdc-form-field-type-mat-native-select {
    .mat-mdc-form-field-infix::after {
      content: '';
      width: 0;
      height: 0;
      border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
      border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
      border-top: $mat-form-field-select-arrow-height solid;
      position: absolute;
      right: 0;

      // Make the arrow non-clickable so the user can click on the form control under it.
      pointer-events: none;

      [dir='rtl'] & {
        right: auto;
        left: 0;
      }
    }

    // Add padding on the end of the native select so that the content does not
    // overlap with the Material Design arrow.
    .mat-mdc-form-field-input-control {
      padding-right: $mat-form-field-select-horizontal-end-padding;
      [dir='rtl'] & {
        padding-right: 0;
        padding-left: $mat-form-field-select-horizontal-end-padding;
      }
    }
  }
}

// Gets the color to use for some text that is highlighted while a select has focus.
@function _get-focused-arrow-color($palette) {
  @return rgba(mdc-theme-color.prop-value($palette), 0.87);
}

@mixin private-form-field-native-select-color($config) {
  @include mdc-helpers.mat-using-mdc-theme($config) {
    // These values are taken from the MDC select implementation:
    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
    $dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
    $disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);

    select.mat-mdc-form-field-input-control {
      // 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($config, is-dark)) {
        option {
          color: palette.$dark-primary-text;
        }

        option:disabled {
          color: palette.$dark-disabled-text;
        }
      }
    }

    .mat-mdc-form-field-type-mat-native-select {
      .mat-mdc-form-field-infix::after {
        color: $dropdown-icon-color;
      }

      &.mat-focused {
        &.mat-primary {
          .mat-mdc-form-field-infix::after {
            color: _get-focused-arrow-color(primary);
          }
        }

        &.mat-accent {
          .mat-mdc-form-field-infix::after {
            color: _get-focused-arrow-color(secondary);
          }
        }

        &.mat-warn {
          .mat-mdc-form-field-infix::after {
            color: _get-focused-arrow-color(error);
          }
        }
      }

      &.mat-form-field-disabled {
        .mat-mdc-form-field-infix::after {
          color: $disabled-dropdown-icon-color;
        }
      }
    }
  }
}