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

<style include="cr-shared-style cr-input-style">
  :host {
    display: flex;
    user-select: none;
    --cr-search-field-clear-icon-fill: var(--google-grey-700);
    --cr-search-field-clear-icon-margin-end : -4px;
    --cr-search-field-input-border-bottom: 1px solid var(--cr-secondary-text-color);
  }

  #searchIcon {
    align-self: center;
    display: var(--cr-search-field-search-icon-display, inherit);
    height: 16px;
    padding: 4px;
    vertical-align: middle;
    width: 16px;
  }

  #searchIconInline {
    --iron-icon-fill-color: var(--cr-search-field-search-icon-fill, inherit);
    display: var(--cr-search-field-search-icon-inline-display, none);
    margin-inline-start: var(--cr-search-field-search-icon-inline-margin-start, 0);
  }

  #searchInput {
    --cr-input-background-color: transparent;
    --cr-input-border-bottom: var(--cr-search-field-input-border-bottom);
    --cr-input-border-radius: 0;
    --cr-input-error-display: none;
    --cr-input-min-height: var(--cr-search-field-input-min-height, 24px);
    --cr-input-padding-end: 0;
    --cr-input-padding-start: var(--cr-search-field-input-padding-start, 0);
    --cr-input-padding-bottom: var(--cr-search-field-input-padding-bottom, 2px);
    --cr-input-padding-top: var(--cr-search-field-input-padding-top, 2px);
    --cr-input-placeholder-color: var(--cr-search-field-placeholder-color);
    --cr-input-underline-display: var(--cr-search-field-underline-display);
    --cr-input-underline-border-radius: var(--cr-search-field-input-underline-border-radius, 0);
    --cr-input-underline-height: var(--cr-search-field-input-underline-height, 0);
    align-self: stretch;
    color: var(--cr-primary-text-color);
    display: block;
    font-size: 92.3076923%;  /* To 12px from 13px. */
    width: var(--cr-search-field-input-width, 160px);
  }

  :host([has-search-text]) #searchInput {
    --cr-input-padding-end: calc(24px +
      var(--cr-search-field-clear-icon-margin-end));
  }

  #clearSearch {
    --cr-icon-button-fill-color: var(--cr-search-field-clear-icon-fill);
    /* A 16px icon that fits on the input line. */
    --cr-icon-button-icon-size: var(--cr-search-field-clear-icon-size, 16px);
    --cr-icon-button-size: var(--cr-search-field-clear-button-size, 24px);
    margin-inline-end: var(--cr-search-field-clear-icon-margin-end);
    margin-inline-start: 4px;
    position: absolute;
    right: 0;
  }

  :host-context([chrome-refresh-2023]) #clearSearch {
    /* Necessary to be above the '#hover-layer' in cr-input. */
    z-index: 1;
  }

  :host-context([dir='rtl']) #clearSearch {
    left: 0;
    right: auto;
  }
</style>
<iron-icon id="searchIcon" icon="cr:search" part="searchIcon"></iron-icon>
<cr-input id="searchInput" part="searchInput" on-search="onSearchTermSearch"
    on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
    autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false">
  <iron-icon id="searchIconInline" slot="inline-prefix" icon="cr:search"></iron-icon>
  <cr-icon-button id="clearSearch" class="icon-cancel"
      hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_"
      title="[[clearLabel]]">
  </cr-icon-button>
</cr-input>