chrome/browser/resources/new_tab_page/realbox/realbox.html

<style include="cr-icons">
  :host {
    --cr-realbox-height: 44px;
    --cr-realbox-min-width: var(--ntp-search-box-width);
    --cr-realbox-shadow: 0 1px 6px 0 var(--color-realbox-shadow);
    --cr-realbox-width: var(--cr-realbox-min-width);

    --ntp-realbox-border-radius: calc(0.5 * var(--cr-realbox-height));
    --ntp-realbox-icon-width: 26px;
    --ntp-realbox-inner-icon-margin: 8px;
    --ntp-realbox-voice-icon-offset: 16px;
    border-radius: var(--ntp-realbox-border-radius);
    box-shadow: var(--cr-realbox-shadow);
    font-size: 16px;
    height: var(--cr-realbox-height);
    width: var(--cr-realbox-width);
  }

  /**
   * Maintain a larger width if the secondary side can be shown and was at any
   * point available to be shown.
   */
  :host([can-show-secondary-side][had-secondary-side]),
  :host([can-show-secondary-side][width-behavior_='wide']) {
    --cr-realbox-width: 746px;
  }

  :host([can-show-secondary-side][width-behavior_='revert']:not(
      [dropdown-is-visible])) {
    --cr-realbox-width: var(--cr-realbox-min-width);
  }

  :host([is-tall_]) {
    --cr-realbox-height: 48px;
  }

  /**
   * Show the secondary side if it can be shown and is currently available to be
   * shown.
   */
  :host([can-show-secondary-side][has-secondary-side]) {
    --cr-realbox-secondary-side-display: block;
  }

  :host([is-dark]) {
    --cr-realbox-shadow: 0 2px 6px 0 var(--color-realbox-shadow);
  }

  :host([realbox-lens-search-enabled_]) {
    --ntp-realbox-voice-icon-offset: 53px;
  }

  @media (forced-colors: active) {
    :host {
      border: 1px solid ActiveBorder;
    }
  }

  :host([dropdown-is-visible]) {
    box-shadow: none;
  }

  :host([match-searchbox]) {
    box-shadow: none;
  }

  :host([match-searchbox]:not([dropdown-is-visible]):hover) {
    border: 1px solid transparent;
    box-shadow: var(--cr-realbox-shadow);
  }

  :host([match-searchbox]:not([is-dark]):not([dropdown-is-visible]):not(:hover)) {
    border: 1px solid var(--color-realbox-border);
  }

  #inputWrapper {
    height: 100%;
    position: relative;
  }

  input {
    background-color: var(--color-realbox-background);
    border: none;
    border-radius: var(--ntp-realbox-border-radius);
    color: var(--color-realbox-foreground);
    font-family: inherit;
    font-size: inherit;
    height: 100%;
    outline: none;
    padding-inline-end: calc(var(--ntp-realbox-voice-icon-offset) + var(--ntp-realbox-icon-width) + var(--ntp-realbox-inner-icon-margin));
    padding-inline-start: 52px;
    position: relative;
    width: 100%;
  }

  input::-webkit-search-decoration,
  input::-webkit-search-results-button,
  input::-webkit-search-results-decoration {
    display: none;
  }

  /* Visually hide the cancel button but do not set display to none or
   * visibility to hidden as this causes issues with NVDA not reading out the
   * full value of the realbox input as the user selects suggestion matches.
   * See crbug.com/1312442 for more context. */
  input::-webkit-search-cancel-button {
    appearance: none;
    margin: 0;
  }

  input::placeholder {
    color: var(--color-realbox-placeholder);
  }

  input:focus::placeholder {
    /* Visually hide the placeholder on focus. The placeholder will still be
     * read by screen readers. Using color: transparent or other ways of
     * visually hiding the placeholder does not work well with 'Find in page...'
     * as the placeholder text can get highlighted. */
    visibility: hidden;
  }

  input:focus,
  :host([dropdown-is-visible]) input {
    background-color: var(--color-realbox-results-background);
  }

  input:hover {
    background-color: var(--color-realbox-background-hovered);
  }

  cr-realbox-icon {
    height: 100%;
    left: 12px;
    position: absolute;
    top: 0;
  }

  :host-context([dir='rtl']) cr-realbox-icon {
    left: unset;
    right: 12px;
  }

  .realbox-icon-button {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px 21px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    height: 100%;
    outline: none;
    padding: 0;
    pointer-events: auto;
    position: absolute;
    right: 16px;
    width: var(--ntp-realbox-icon-width);
  }

  :host([single-colored-icons]) #voiceSearchButton,
  :host([single-colored-icons]) #lensSearchButton {
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 21px 21px;
    background-color: var(--color-new-tab-page-primary-foreground);
  }

  :host([single-colored-icons]) #voiceSearchButton {
    -webkit-mask-image: url(icons/googlemic_clr_24px.svg);
  }

  :host(:not([single-colored-icons])) #voiceSearchButton {
    background-image: url(icons/googlemic_clr_24px.svg);
  }

  :host([single-colored-icons]) #lensSearchButton {
    -webkit-mask-image: url(chrome://new-tab-page/icons/lens_icon.svg);
  }

  :host(:not([single-colored-icons])) #lensSearchButton {
    background-image: url(chrome://new-tab-page/icons/lens_icon.svg);
  }

  :host([realbox-lens-search-enabled_]):host-context([dir='rtl']) #voiceSearchButton {
    left: var(--ntp-realbox-voice-icon-offset);
    right: unset;
  }

  :host([realbox-lens-search-enabled_]) #voiceSearchButton {
    right: var(--ntp-realbox-voice-icon-offset);
  }

  :host-context([dir='rtl']) .realbox-icon-button {
    left: 16px;
    right: unset;
  }

  :host-context(.focus-outline-visible) .realbox-icon-button:focus {
    box-shadow: var(--ntp-focus-shadow);
  }

  :-webkit-any(input, cr-realbox-icon, .realbox-icon-button) {
    z-index: 100;
  }

  cr-realbox-dropdown {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
  }
</style>
<div id="inputWrapper" on-focusout=onInputWrapperFocusout_
    on-keydown="onInputWrapperKeydown_">
  <input id="input" type="search" autocomplete="off" spellcheck="false"
      aria-live="[[inputAriaLive_]]" role="combobox"
      aria-expanded="[[dropdownIsVisible]]" aria-controls="matches"
      placeholder="$i18n{searchBoxHint}" on-copy="onInputCutCopy_"
      on-cut="onInputCutCopy_" on-focus="onInputFocus_"
      on-input="onInputInput_" on-keydown="onInputKeydown_"
      on-keyup="onInputKeyup_" on-mousedown="onInputMouseDown_"
      on-paste="onInputPaste_">
  <cr-realbox-icon id="icon" match="[[selectedMatch_]]"
      default-icon="[[realboxIcon_]]" in-searchbox>
  </cr-realbox-icon>
  <button id="voiceSearchButton" class="realbox-icon-button"
      on-click="onVoiceSearchClick_" title="$i18n{voiceSearchButtonLabel}">
  </button>
  <template is="dom-if" if="[[realboxLensSearchEnabled_]]">
    <button id="lensSearchButton" class="realbox-icon-button"
        on-click="onLensSearchClick_" title="$i18n{lensSearchButtonLabel}">
    </button>
  </template>
  <cr-realbox-dropdown id="matches" role="listbox" result="[[result_]]"
      selected-match-index="{{selectedMatchIndex_}}"
      can-show-secondary-side="[[canShowSecondarySide]]"
      had-secondary-side="{{hadSecondarySide}}"
      has-secondary-side="{{hasSecondarySide}}"
      on-match-focusin="onMatchFocusin_" on-match-click="onMatchClick_"
      on-match-remove="onMatchRemove_" on-header-focusin="onHeaderFocusin_"
      hidden$="[[!dropdownIsVisible]]">
  </cr-realbox-dropdown>
</div>