Select Material Like: With Helper Dark

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="select--dark">
    <div class="select__wrapper">
        <select class="select__select" id="select" name="select">
            <option value="" disabled selected>Please choose</option>
            <option value="Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option">Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
            <option value="option 4">option 4</option>
            <option value="option 5">option 5</option>
            <option value="option 6">option 6</option>
            <option value="option 7">option 7</option>
            <option value="option 8">option 8</option>
            <option value="option 9">option 9</option>
            <option value="option 10">option 10</option>
            <option value="option 11">option 11</option>
            <option value="option 12">option 12</option>
            <option value="option 13">option 13</option>
            <option value="option 14">option 14</option>
            <option value="option 15">option 15</option>
        </select>
        <label class="select__label" for="select">Text</label>
    </div>
    <div class="select__helper">Please note that this form field has a helper text</div>
    <!-- NOTE: This div is reserved for field-specific error messages by a backend -->
    <!--<div class="select__error">Put in the error message here...</div>-->
</div>


        <div class="select--{{splitDashLast _self.name}}">
  <div class="select__wrapper">
    <select class="select__select" id="{{id}}" name="{{name}}"{{#if disabled}} disabled{{/if}} {{#if required }}required="true"{{/if}}>
    {{#unless selected}}
      <option value="" disabled selected>Please choose</option>
    {{/unless}}
    {{#each options}}
      <option value="{{this}}">{{this}}</option>
    {{/each}}
    </select>
    {{#if label}}
      <label class="select__label" for="{{id}}">{{label}}</label>
    {{/if}}
  </div>
  {{#if helper}}
    <div class="select__helper">{{helper}}</div>
  {{/if}}
  <!-- NOTE: This div is reserved for field-specific error messages by a backend -->
  {{#if error}}
    <div class="select__error">{{error}}</div>
  {{else}}
    <!--<div class="select__error">Put in the error message here...</div>-->
  {{/if}}
</div>


        
            
            {
  "id": "select",
  "name": "select",
  "label": "Text",
  "required": false,
  "disabled": false,
  "selected": false,
  "options": [
    "Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option",
    "option 2",
    "option 3",
    "option 4",
    "option 5",
    "option 6",
    "option 7",
    "option 8",
    "option 9",
    "option 10",
    "option 11",
    "option 12",
    "option 13",
    "option 14",
    "option 15"
  ],
  "error": "",
  "helper": "Please note that this form field has a helper text"
}

File:

Content:


                                import './select-material-like.scss';
export * from './select-material-like';

URL: /components/raw/select-material-like/select-material-like-bundle.js
Filesystem Path: src/components/select/select-material-like/select-material-like-bundle.js
Size: 78 Bytes

Content:


                                import FormComponent from '../../form-component';
import Bowser from 'bowser';

export class Select extends FormComponent {
  constructor(context, options) {
    super(
      context,
      context.querySelector('.select__select'),
      context.querySelector('.select__error'),
      'Select',
      options
    );
    super.init();

    this.wrapper = context.querySelector('.select__wrapper');
    this.helperField = context.querySelector('.select__helper');
    this.dropdown = null;
    this.dropdownOptions = [];
    this.userInfo = Bowser.parse(window.navigator.userAgent);

    this.initEvents();
  }

  get isOpen() {
    return this.context.classList.contains('is-open');
  }

  initEvents() {
    this.context.addEventListener('keydown', event => {
      if (!this.field.hasAttribute('disabled')) {
        this.onKeydown(event);
      }
    });
    // for native changes (e.g. iOS):
    this.field.addEventListener('change', () => {
      if (!this.field.hasAttribute('disabled')) {
        this.setActive(this.field.selectedIndex);
      }
    });
    if (this.userInfo.platform.type === 'desktop') {
      // It's important to use mousedown instead of click for Desktop, otherwise
      // it's too late to prevent the default select dropdown
      // Also listen for pointerdown, in case its a touch Desktop device
      // (Edge doesn't listen to touchstart if it's a touch Desktop device,
      // only for pointerdown)
      ['mousedown', 'pointerdown'].forEach(listener => {
        this.field.addEventListener(listener, e => {
          if (!this.field.hasAttribute('disabled')) {
            e.preventDefault();
            // prevent other above named listeners from handling the same action:
            e.stopPropagation();
            this.toggle();
          }
        });
      });
    }
    this.field.addEventListener('blur', () => {
      if (!this.field.hasAttribute('disabled')) {
        // Make sure to not close the dropdown before the option click event
        // is called. Otherwise you can't select any value using click
        setTimeout(() => {
          const target = document.activeElement;
          if (target === this.context || this.context.contains(target)) {
            return;
          }
          this.close();
        }, 150);
      }
    });
  }

  onEnter() {
    this.toggle();
  }

  onSpace() {
    this.open();
  }

  onEsc() {
    this.close();
  }

  onArrowKey(keyCode) {
    const expectedIdx = this.getSiblingDropdownOption(
      [39, 40].includes(keyCode)
    );
    this.setActive(expectedIdx);
    if (!this.isOpen) {
      this.open();
    }
  }

  onKeydown(event) {
    const keyCode = event.keyCode;
    switch (keyCode) {
      case 13: // enter
        event.preventDefault();
        this.onEnter();
        break;
      case 32: // space
        event.preventDefault();
        this.onSpace();
        break;
      case 37: // left
      case 38: // up
      case 39: // right
      case 40: // down
        event.preventDefault();
        this.onArrowKey(keyCode);
        break;
      case 27: // esc
        event.preventDefault();
        this.onEsc();
        break;
      default:
        return;
    }
  }

  createDropdown() {
    this.dropdown = document.createElement('ul');
    this.dropdown.classList.add('select__dropdown');
    this.dropdownOptions = [...this.field.options].map(dropdownOption => {
      const option = document.createElement('li');
      option.classList.add('select__dropdown-option');
      option.textContent = dropdownOption.textContent;
      if (dropdownOption.getAttribute('disabled') !== null) {
        option.classList.add('is-disabled');
      }
      this.dropdown.appendChild(option);
      return option;
    });
    if (this.helperField) {
      this.context.insertBefore(this.dropdown, this.helperField);
    } else if (this.errorField) {
      this.context.insertBefore(this.dropdown, this.errorField);
    } else {
      this.context.appendChild(this.dropdown);
    }
    this.dropdownOptions.forEach((option, index) => {
      if (option.classList.contains('is-disabled')) {
        return;
      }
      option.addEventListener('click', () => {
        this.setActive(index);
        this.close();
      });
    });
    this.setActive(this.field.selectedIndex);
  }

  deleteDropdown() {
    if (this.dropdown && this.dropdown.parentElement) {
      this.dropdown.parentElement.removeChild(this.dropdown);
    }
  }

  toggle() {
    if (!this.isOpen) {
      return this.open();
    } else {
      return this.close();
    }
  }

  open() {
    this.createDropdown();
    this.context.classList.add('is-open');
    this.field.focus();
    this.scrollActiveDropdownOptionIntoView();
  }

  close() {
    this.context.classList.remove('is-open');
    this.setIsFilledIn();
    this.deleteDropdown();
  }

  setActive(index) {
    // Check if an element with that index exists
    if (this.field.options[index]) {
      this.setActiveDropdownOption(index);
      this.setActiveNativeOption(index);
    }
  }

  setActiveDropdownOption(index) {
    // Check if an element with that index exists
    if (!this.dropdownOptions[index]) {
      return;
    }
    this.dropdownOptions.forEach((option, dropdownIndex) => {
      if (index === dropdownIndex) {
        option.classList.add('is-selected');
      } else {
        option.classList.remove('is-selected');
      }
    });
    this.scrollActiveDropdownOptionIntoView();
  }

  setActiveNativeOption(index) {
    // Check if an element with that index exists
    if (!this.field.options[index]) {
      return;
    }
    const hasChanged = this.field.selectedIndex !== index;
    this.field.selectedIndex = index;
    [...this.field.options].forEach((option, optionIndex) => {
      if (optionIndex === index) {
        option.selected = true;
        option.setAttribute('selected', 'selected');
      } else {
        option.selected = false;
        if (option.hasAttribute('selected')) {
          option.removeAttribute('selected');
        }
      }
    });
    if (hasChanged) {
      // Trigger native onchange event
      if (document.createEvent) {
        const evt = document.createEvent('HTMLEvents');
        evt.initEvent('change', true, false);
        this.field.dispatchEvent(evt);
      } else if (document.createEventObject) {
        this.field.fireEvent('change');
      } else if (typeof this.field.onchange === 'function') {
        this.field.onchange();
      }
    }
  }

  scrollActiveDropdownOptionIntoView() {
    const target = this.dropdownOptions[this.field.selectedIndex];
    target.parentNode.scrollTop = target.offsetTop;
  }

  getSiblingDropdownOption(next) {
    const base = this.field.selectedIndex;
    let newIdx = base;
    if (next) {
      for (let i = base + 1; i < this.dropdownOptions.length; i++) {
        if (!this.dropdownOptions[i].classList.contains('is-disabled')) {
          newIdx = i;
          break;
        }
      }
    } else {
      for (let i = base - 1; i >= 0; i--) {
        if (!this.dropdownOptions[i].classList.contains('is-disabled')) {
          newIdx = i;
          break;
        }
      }
    }
    return newIdx;
  }
}

export const selector = '[class^="select--"]';

URL: /components/raw/select-material-like/select-material-like.js
Filesystem Path: src/components/select/select-material-like/select-material-like.js
Size: 7.2 KB

Content:


                                @import "~shared/base";

/*******************************************************************************
 * Contextual classes:
 * - is-disabled: When input is disabled
 * - is-filled-in: When a value is available or the user clicked on the select
 * - is-open: If the dropdown is open
 * - is-tabbed: When the select is focused (a11y)
 * - is-focused: When the input is focused
 * - is-initialized: When the JS for the component is initialized
 * - has-no-label: If there is no label available
 ******************************************************************************/
// sizes
$selectHeight: 2.375rem; // 38px + 12px == 50px height
$selectPaddingX: 0;
$selectDropdownOptionPaddingX: 5px;
$selectDropdownMaxHeight: 12.075rem; // 7 rows ~ 17.6rem line height, 10px padding

// font settings
$selectFontFamily: inherit;
$selectFontSize: 1.125rem;

$selectArrowFontSize: 0.75rem;

$selectLabelFontFamily: inherit;
$selectLabelFontSize: 0.75rem;

$selectDropdownOptionFontFamily: inherit;
$selectDropdownOptionFontSize: 1rem;
$selectDropdownOptionLineHeight: 1.1;

$selectErrorFontSize: 1rem;
$selectHelperFontSize: 1rem;

// Need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
  @if $color == "light" {
    // color settings
    $selectBackgroundColor: transparent !global;
    $selectBackgroundActiveColor: $selectBackgroundColor !global;
    $selectBackgroundInvalidColor: $selectBackgroundColor !global;
    $selectBackgroundInvalidActiveColor: $selectBackgroundColor !global;

    $selectColor: $black !global;
    $selectActiveColor: $selectColor !global;
    $selectInvalidColor: $selectColor !global;
    $selectInvalidActiveColor: $selectColor !global;

    $selectBorderBottomColor: $black !global;
    $selectBorderBottomActiveColor: $selectBorderBottomColor !global;
    $selectBorderBottomInvalidColor: $red !global;
    $selectBorderBottomInvalidActiveColor: $selectBorderBottomInvalidColor !global;
    $selectDropdownBorderColor: $selectBorderBottomActiveColor !global;
    $selectDropdownBorderInvalidColor: $selectBorderBottomInvalidActiveColor !global;

    $selectErrorColor: $red !global;
    $selectTabbedBorderColor: #95a5a6 !global;

    $selectHelperColor: $black !global;
    $selectHelperInvalidColor: $black !global;

    $selectArrowColor: $black !global;
    $selectArrowActiveColor: $selectArrowColor !global;
    $selectArrowInvalidColor: $selectArrowColor !global;;
    $selectArrowInvalidActiveColor: $selectArrowColor !global;

    $selectLabelColor: $black !global;
    $selectLabelActiveColor: $selectLabelColor !global;
    $selectLabelInvalidColor: $red !global;
    $selectLabelInvalidActiveColor: $selectLabelInvalidColor !global;

    $selectDropdownOptionColor: $black !global;
    $selectDropdownOptionBackgroundColor: $white !global;
    $selectDropdownOptionHoverBackgroundColor: $clouds !global;
    $selectDropdownOptionHoverColor: $selectDropdownOptionColor !global;
    $selectDropdownOptionActiveBackgroundColor: #EEEEEE !global;
    $selectDropdownOptionActiveColor: $black !global;
  } @else {
    // color settings
    $selectBackgroundColor: transparent !global;
    $selectBackgroundActiveColor: $selectBackgroundColor !global;
    $selectBackgroundInvalidColor: $selectBackgroundColor !global;
    $selectBackgroundInvalidActiveColor: $selectBackgroundColor !global;

    $selectColor: $white !global;
    $selectActiveColor: $selectColor !global;
    $selectInvalidColor: $selectColor !global;
    $selectInvalidActiveColor: $selectColor !global;

    $selectBorderBottomColor: $white !global;
    $selectBorderBottomActiveColor: $selectBorderBottomColor !global;
    $selectBorderBottomInvalidColor: $red !global;
    $selectBorderBottomInvalidActiveColor: $selectBorderBottomInvalidColor !global;
    $selectDropdownBorderColor: $selectBorderBottomActiveColor !global;
    $selectDropdownBorderInvalidColor: $selectBorderBottomInvalidActiveColor !global;

    $selectErrorColor: $red !global;
    $selectTabbedBorderColor: #95a5a6 !global;

    $selectHelperColor: $white !global;
    $selectHelperInvalidColor: $white !global;

    $selectArrowColor: $white !global;
    $selectArrowActiveColor: $selectArrowColor !global;
    $selectArrowInvalidColor: $selectArrowColor !global;;
    $selectArrowInvalidActiveColor: $selectArrowColor !global;

    $selectLabelColor: $white !global;
    $selectLabelActiveColor: $selectLabelColor !global;
    $selectLabelInvalidColor: $red !global;
    $selectLabelInvalidActiveColor: $selectLabelInvalidColor !global;

    $selectDropdownOptionColor: $black !global;
    $selectDropdownOptionBackgroundColor: $white !global;
    $selectDropdownOptionHoverBackgroundColor: $clouds !global;
    $selectDropdownOptionHoverColor: $selectDropdownOptionColor !global;
    $selectDropdownOptionActiveBackgroundColor: #EEEEEE !global;
    $selectDropdownOptionActiveColor: $black !global;
  }

  /*****************************************************************************
   * General
   ****************************************************************************/
  .select {
    $block: &;

    &--#{unquote($color)} {
      position: relative;

      &.is-disabled {
        * {
          pointer-events: none;
        }

        &,
        * {
          cursor: not-allowed !important;
        }
      }

      &.is-tabbed {
        outline: 1px solid $selectTabbedBorderColor;
        outline-offset: 3px;
      }

      /*************************************************************************
       * Wrapper
       ************************************************************************/
      #{$block}__wrapper {
        position: relative;
        width: 100%;
        height: $selectHeight;
        padding-top: $selectLabelFontSize;
        overflow: hidden; // for IE text indent fix (see below in select)
        @include form-components-icons-after("arrow-down-material");
        &, * {
          user-select: none;
        }

        // NOTE: Specify the arrow on a wrapper as after, as using background
        // image on the select itself will be overwritten by Chrome's autofill
        // feature
        &:after {
          position: absolute;
          top: $selectLabelFontSize;
          right: 0;
          font-size: $selectArrowFontSize;
          line-height: $selectHeight;
          height: $selectHeight;
          color: $selectArrowColor;
          pointer-events: none; // forward clicks on after to select
        }
      }

      // Opened
      &.is-open #{$block}__wrapper {
        &:after {
          transform: rotate(-180deg);
        }
      }

      // No label
      &.has-no-label #{$block}__wrapper {
        padding-top: 0;

        &:after {
          top: 0;
        }
      }

      // Active
      &.is-focused #{$block}__wrapper {
        &:after {
          color: $selectArrowActiveColor;
        }
      }

      // Invalid
      &.is-invalid #{$block}__wrapper {
        &:after {
          color: $selectArrowInvalidColor;
        }
      }

      // Invalid & Active
      &.is-invalid.is-focused #{$block}__wrapper {
        &:after {
          color: $selectArrowInvalidActiveColor;
        }
      }

      /*************************************************************************
       * Native select
       ************************************************************************/
      #{$block}__select {
        &,
        &:invalid,
        &:required {
          font-size: $selectFontSize;
          font-family: $selectFontFamily;
          height: $selectHeight;
          line-height: $selectHeight;
          padding: 0 calc(#{$selectPaddingX} + #{$selectArrowFontSize} + 10px) 0 $selectPaddingX;
          width: 100%;
          box-sizing: border-box;
          background-color: $selectBackgroundColor;
          color: $selectColor;
          cursor: pointer;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          appearance: none; // avoid native arrow
          outline: 0;
          border-color: $selectBorderBottomColor;
          border-width: 0 0 1px 0;
          border-style: solid;
          border-radius: 0; // iOS default removal
          box-shadow: none; // red border removal in case it's invalid/required

          // Some hacks to remove native text indentation of select fields, as
          // described in: https://stackoverflow.com/a/45976351/3894981
          @-moz-document url-prefix() {
            // Firefox only
            & {
              text-indent: -2px
            }
          }
          @supports (-ms-ime-align: auto) {
            // Edge only
            & {
              width: calc(100% + 4px);
              margin-left: -4px;
            }
          }
          @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            // IE11 only
            & {
              width: calc(100% + 4px);
              margin-left: -3px;
            }
          }

          // hide dotted outline in Firefox
          &:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 $selectColor;
          }

          // hide native arrow in IE11
          &::-ms-expand {
            display: none;
          }

          // hide blue background when active in IE11
          &::-ms-value {
            background-color: $selectBackgroundColor;
            color: $selectColor;
          }

          // as we have overridden ms-value, we need to fix that in high
          // contrast mode
          @media screen and (-ms-high-contrast: white-on-black) {
            &::-ms-value {
              color: $a11yTextColorWhiteOnBlack !important;
            }
          }
          @media screen and (-ms-high-contrast: black-on-white) {
            &::-ms-value {
              color: $a11yTextColorBlackOnWhite !important;
            }
          }

          // use a "bug" of Chrome to overwrite autofill styling
          // https://stackoverflow.com/a/37432260/3894981
          // !important is necessary as it won't work otherwise
          @-webkit-keyframes autofill {
            to {
              color: $selectColor !important;
              background-color: $selectBackgroundColor;
            }
          }
          &:-webkit-autofill {
            -webkit-animation-name: autofill;
            -webkit-animation-fill-mode: both;
          }
        }
      }

      // Active
      &.is-focused #{$block}__select {
        &,
        &:invalid,
        &:required {
          background: $selectBackgroundActiveColor;
          color: $selectActiveColor;
          border-color: $selectBorderBottomActiveColor;

          &:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 $selectActiveColor;
          }

          &::-ms-expand {
            display: none;
          }

          &::-ms-value {
            background-color: $selectBackgroundActiveColor;
            color: $selectActiveColor;
          }

          @-webkit-keyframes autofill {
            to {
              color: $selectActiveColor !important;
              background-color: $selectBackgroundActiveColor;
            }
          }
        }
      }

      // Invalid
      &.is-invalid #{$block}__select {
        &,
        &:invalid,
        &:required {
          background: $selectBackgroundInvalidColor;
          color: $selectInvalidColor;
          border-color: $selectBorderBottomInvalidColor;

          &:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 $selectInvalidColor;
          }

          &::-ms-expand {
            display: none;
          }

          &::-ms-value {
            background-color: $selectBackgroundInvalidColor;
            color: $selectInvalidColor;
          }

          @-webkit-keyframes autofill {
            to {
              color: $selectInvalidColor !important;
              background-color: $selectBackgroundInvalidColor;
            }
          }
        }
      }

      // Invalid & Active
      &.is-invalid.is-focused #{$block}__select {
        &,
        &:invalid,
        &:required {
          background: $selectBackgroundInvalidActiveColor;
          color: $selectInvalidActiveColor;
          border-color: $selectBorderBottomInvalidActiveColor;

          &:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 $selectInvalidActiveColor;
          }

          &::-ms-expand {
            display: none;
          }

          &::-ms-value {
            background-color: $selectBackgroundInvalidActiveColor;
            color: $selectInvalidActiveColor;
          }

          @-webkit-keyframes autofill {
            to {
              color: $selectInvalidActiveColor !important;
              background-color: $selectBackgroundInvalidActiveColor;
            }
          }
        }
      }

      /*************************************************************************
       * Label (will be moved to top when value available)
       ************************************************************************/
      #{$block}__label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        line-height: $selectLabelFontSize;
        color: $selectLabelColor;
        font-size: $selectLabelFontSize;
        font-family: $selectLabelFontFamily;
        padding: 0 $selectPaddingX;
        box-sizing: border-box;
        transform-origin: 0 0;
      }

      // Active
      &.is-focused #{$block}__label {
        color: $selectLabelActiveColor;
      }

      // Invalid
      &.is-invalid #{$block}__label {
        color: $selectLabelInvalidColor;
      }

      // Invalid & Active
      &.is-invalid.is-focused #{$block}__label {
        color: $selectLabelInvalidActiveColor;
      }

      /*************************************************************************
       * Dropdown
       ************************************************************************/
      #{$block}__dropdown {
        position: absolute;
        border-color: $selectDropdownBorderColor;
        border-width: 0 1px 1px 1px; // there's already the border of the select
        border-style: solid;
        width: 100%;
        z-index: 9;
        margin: 0;
        padding: 0;
        max-height: calc(#{$selectDropdownMaxHeight} + 1px); // 1px border
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        display: none;
      }

      // Opened
      &.is-open #{$block}__dropdown {
        display: block;
      }

      // Invalid
      &.is-invalid #{$block}__dropdown {
        border-color: $selectDropdownBorderInvalidColor;
      }

      #{$block}__dropdown-option {
        display: block;
        font-family: $selectDropdownOptionFontFamily;
        font-size: $selectDropdownOptionFontSize;
        line-height: $selectDropdownOptionLineHeight;
        padding: 5px $selectDropdownOptionPaddingX;
        color: $selectDropdownOptionColor;
        background-color: $selectDropdownOptionBackgroundColor;
        cursor: pointer;

        &.is-selected {
          background-color: $selectDropdownOptionActiveBackgroundColor;
          color: $selectDropdownOptionActiveColor;

          @media screen and (-ms-high-contrast: white-on-black) {
            color: $a11yTextHighlightColorWhiteOnBlack;
          }
          @media screen and (-ms-high-contrast: black-on-white) {
            color: $a11yTextHighlightColorBlackOnWhite;
          }
        }

        &.is-disabled {
          cursor: not-allowed;
        }

        &:not(.is-disabled):hover {
          background-color: $selectDropdownOptionHoverBackgroundColor;
          color: $selectDropdownOptionHoverColor;
        }
      }

      /*************************************************************************
       * Error
       ************************************************************************/
      #{$block}__error {
        font-size: $selectErrorFontSize;
        color: $selectErrorColor;
        margin: 5px $selectPaddingX;

        a {
          color: $selectErrorColor;
        }
      }

      /*************************************************************************
       * Helper
       ************************************************************************/
      #{$block}__helper {
        font-size: $selectHelperFontSize;
        color: $selectHelperColor;
        margin: 5px $selectPaddingX;
      }

      &.is-invalid #{$block}__helper {
        color: $selectHelperInvalidColor;
      }
    }
  }
}

URL: /components/raw/select-material-like/select-material-like.scss
Filesystem Path: src/components/select/select-material-like/select-material-like.scss
Size: 16.7 KB

Handle: @select-material-like--with-helper-dark
Variants (8): Light , Dark , With Helper Light , With Helper Dark , With Error Light , With Error Dark , With Error And Helper Light , With Error And Helper Dark
Preview:
- With layout
- Component only
Filesystem Path: src/components/select/select-material-like/select-material-like.hbs

The material like select shows a custom dropdown in Desktop browsers and the native dropdown on mobile browsers for the best usability. It’s implemented accessible, meaning it works when navigatin with the keyboard.

Why was the custom select in Desktop browsers necessary at all? Due to the fact that browsers are offering a very limited set of possibilities to style it. For example you can’t change the blue hover background color of options on Windows.