chrome/browser/resources/commander/app.html

<style>
  :host {
    background-color: #fff;
    overflow: hidden;
  }

  input {
    border: 0;
    box-sizing: border-box;
    height: 100%;
    margin:0;
    padding: 1em 1em 1em .5em;
    width: 100%;
  }

  input:focus {
    outline: none;
  }

  #inputRow {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 48px;
    width: 100%;
  }

  #noResults {
    border-top: 1px #aaa;
    box-sizing: border-box;
    font-weight: bold;
    height: 48px;
    padding: 1em;
    width: 100%;
  }

  .chip {
    background-color: var(--google-blue-50);
    border-radius: 100px;
    box-sizing: border-box;
    color: var(--google-blue-700);
    display: inline-block;
    height: 32px;
    margin-inline-start: 12px;
    padding: 8px;
    text-align: center;
    white-space: nowrap;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  iron-icon {
    margin-inline-start: 1em;
    --iron-icon-fill-color: #999;
  }
</style>
<div id="inputRow" aria-owns="options"
    aria-expanded="[[computeExpanded_(options_)]]" role="combobox" >
  <iron-icon icon="cr:search"></iron-icon>
  <template is="dom-if" if="[[computeShowChip_(promptText_)]]">
    <div class="chip">[[promptText_]]</div>
  </template>
  <input id="input" type="text" on-input="onInput_"
      on-keydown="onKeydown_" aria-autocomplete="list" aria-controls="options"
      placeholder="$i18n{placeholder}"></input>
</div>
<div id="options" role="listbox">
<template is="dom-repeat" on-dom-change="onDomChange_" items="[[options_]]">
  <commander-option
      aria-selected="[[computeAriaSelected_(index, focusedIndex_)]]"
      role="option" id="[[getOptionId_(index)]]"
      class$="[[getOptionClass_(index, focusedIndex_)]]"
      model="[[item]]" on-click="onOptionClick_"></commander-option>
</template>
<template is="dom-if" if="[[showNoResults_]]"
    on-dom-change="onDomChange_">
  <div id="noResults">$i18n{noResults}</div>
</template>
</div>