chromium/ash/webui/common/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

<style include="cr-shared-style cr-hidden-style">
  :host {
    --cr-searchable-drop-down-bg-color: var(--cros-sys-base_elevated);
    --cr-searchable-drop-down-icon-color-focus: var(--cros-sys-primary);
    --cr-searchable-drop-down-list-bg-color-active:
        var(--cros-sys-hover_on_subtle);
    --cr-searchable-drop-down-list-bg-color-selected:
        var(--cros-sys-base_highlight);
    --cr-searchable-drop-down-list-item-color: var(--cros-sys-on_surface);
    --cr-searchable-drop-down-shadow: var(--cros-elevation-3-shadow);
    --cr-searchable-drop-down-spinner-color: var(--cros-sys-primary);

    /* 472px is the max width of the input field for a dialog. */
    --cr-searchable-drop-down-width: 472px;
  }

  :host(:not([error-message-allowed])) cr-input {
    --cr-input-error-display: none;
  }

  :host([opened_]) cr-input {
    --cr-input-border-radius: 4px 4px 0 0;
  }

  iron-dropdown,
  cr-input {
    width: var(--cr-searchable-drop-down-width);
  }

  cr-input {
    --cr-input-padding-start: 8px;

    /* cr-inputs are by default isolated into their own stacking contexts
     * but cr-searchable-drop-down requires a fixed overlay that floats over
     * and covers other content outside their parent cr-input's stacking
     * contexts.
     */
    isolation: auto;
  }

  iron-dropdown {
    max-height: 270px;
  }

  iron-dropdown [slot='dropdown-content'] {
    background-color: var(--cr-searchable-drop-down-bg-color);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--cr-searchable-drop-down-shadow);
    min-width: 128px;
    padding: 8px 0;
  }

  #input-overlay {
    border-radius: 4px;
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #dropdown-icon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    margin-top: -10px;
    padding-inline-end: 6px;
    position: absolute;
    right: 0;
    top: 50%;
  }

  :host-context([dir='rtl']) #dropdown-icon {
    left: 0;
    right: unset;
  }

  cr-input:focus-within #dropdown-icon {
    --iron-icon-fill-color: var(--cr-searchable-drop-down-icon-color-focus);
  }

  #input-box {
    height: 100%;
    left: 0;
    pointer-events: none;
    top: 0;
    width: 100%;
  }

  #dropdown-box {
    pointer-events: initial;
    width: 100%;
  }

  #loading-box {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 32px;
    padding: 0 8px;
    text-align: start;
    width: 100%;
  }

  #loading-box div {
    font-size: 12px;
    padding: 0 16px;
  }

  #loading-box paper-spinner-lite {
    --paper-spinner-color: var(--cr-searchable-drop-down-spinner-color);
    --paper-spinner-stroke-width: 2px;
    height: 16px;
    width: 16px;
  }

  .list-item {
    background: none;
    border: none;
    box-sizing: border-box;
    color: var(--cr-searchable-drop-down-list-item-color);
    font: inherit;
    min-height: 32px;
    padding: 0 8px;
    text-align: start;
    width: 100%;
  }

  .list-item[selected_] {
    background-color: var(--cr-searchable-drop-down-list-bg-color-selected);
    outline: none;
  }

  .list-item:active {
    background-color: var(--cr-searchable-drop-down-list-bg-color-active);
    outline: none;
  }
</style>
<!-- |value| is one-way binding on purpose so that it doesn't change
  immediately as the user types unless the update-value-on-input flag is
  explicitly used. -->
<cr-input part="input" label="[[label]]" on-focus="onFocus_" on-keydown="onKeyDown_"
    value="[[value]]"
    on-input="onInput_" id="search" autofocus="[[autofocus]]"
    placeholder="[[placeholder]]" readonly="[[readonly]]"
    error-message="[[getErrorMessage_(errorMessage, errorMessageAllowed)]]"
    invalid="[[shouldShowErrorMessage_(errorMessage, errorMessageAllowed)]]"
    on-blur="onBlur_">
  <div id="input-overlay" slot="suffix">
    <div id="input-box">
      <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
    </div>
    <div id="dropdown-box">
      <iron-dropdown id="dropdown" horizontal-align="left"
          vertical-align="top" vertical-offset="0"
          no-cancel-on-outside-click no-cancel-on-esc-key>
        <div slot="dropdown-content">
          <div id="loading-box" hidden="[[!showLoading]]">
            <paper-spinner-lite active></paper-spinner-lite>
            <div class="cr-secondary-text">[[loadingMessage]]</div>
          </div>
          <template is="dom-repeat" items="[[items]]"
              filter="[[filterItems_(searchTerm_)]]">
            <button class="list-item" on-click="onSelect_" tabindex="-1">
              [[item]]
            </button>
          </template>
        </div>
      </iron-dropdown>
    </div>
  </div>
</cr-input>