chromium/chrome/browser/resources/ash/settings/device_page/customize_button_row.html

<style include="md-select settings-shared input-device-settings-shared">
  #container {
    position: relative;
    transition: background 150ms ease;
  }

  :host([is-being-dragged_]) #container {
    background: var(--cros-sys-highlight_shape);

    #buttonLabel {
      color: var(--cros-text-color-disabled);
    }

    .edit-button {
      --cr-icon-button-fill-color: var(--cros-text-color-disabled);
    }
  }

  /* These pseudo-elements are used to display the drop indicator above or
   * below each customize-button-row element. */
  #container::after,
  #container::before {
    border: 0;
    content: '';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
  }

  :host(.drop-indicator-top) #container::before,
  :host(.drop-indicator-bottom) #container::after {
    background: var(--cros-app-scrollbar-color);
    height: 2px;
    /* Add offset to account for separator between customize-button-rows. */
    --indicator-offset: calc(-1.5 * var(--cr-separator-height));
  }

  :host(.drop-indicator-top) #container::before {
    top: var(--indicator-offset);
  }

  :host(.drop-indicator-bottom) #container::after {
    bottom: var(--indicator-offset);
  }

  #header {
    display: flex;
  }

  .edit-button {
    --cr-icon-button-icon-start-offset: 4px;
    --cr-icon-button-margin-start: 0;
    opacity: 0;
    transition: opacity 300ms, transform 100ms;
  }

  .move-button,
  .edit-button {
    --cr-icon-button-icon-size: 16px;
    --cr-icon-button-fill-color: var(--cros-sys-on_surface);
  }

  /* Show edit-button when user hover on the row container. */
  #container:hover .edit-button,
  .edit-button:focus-visible {
    opacity: 1;
  }

  .settings-box {
    align-self: stretch;
    height: 64px;
    padding-inline-start: 0;
  }

  select {
    padding-inline-end: 12px;
    padding-inline-start: 16px;
  }

  .edit-icon-container {
    align-items: center;
    flex: auto;
    size: 48px;
  }

  #buttonLabelContainer {
    padding-inline-end: 6px;
    margin-inline-end: 6px;
    max-width: 292px;
  }

  #keyCombination {
    display: none;
  }

  cr-icon-button {
    margin-inline-end: 24px;
    margin-inline-start: 0;
  }
</style>
<div id="container" class="settings-box"
    on-mousedown="onContainerMouseDown_"
    on-dragstart="onDragStart_" on-dragend="onDragEnd_" draggable="true">
  <div class="move-icon-container">
    <cr-icon-button
      class="move-button"
      iron-icon="os-settings:move"
      id="reorderButton"
      aria-label="[[getReorderButtonLabel_(buttonRemappingName_)]]">
    </cr-icon-button>
  </div>
  <div id="buttonLabelContainer">
    <div id="buttonLabel">[[buttonRemappingName_]]</div>
  </div>
  <div class="edit-icon-container">
    <cr-icon-button class="edit-button" id="renameButton"
      aria-label="$i18n{renameIconLabel}"
      aria-describedby="buttonLabel"
      iron-icon="os-settings:edit"
      on-click="onEditButtonLabelClicked_">
    </cr-icon-button>
  </div>
  <div id="dropdownContainer" class="text-field-container">
    <customize-button-select id="remappingActionDropdown"
        aria-describedby="buttonLabel"
        action-list="[[actionList]]"
        button-remapping-list="{{buttonRemappingList}}"
        remapping-index="[[remappingIndex]]"
        meta-key="[[metaKey]]">
    </customize-button-select>
  </div>
</div>