chrome/browser/resources/pdf/elements/viewer-page-selector.html

    <style>
      /* A separate div is used because if the direction CSS property is applied
       * to the host element, any margins or paddings set by the parent will be
       * affected and be reversed. */
      #content {
        align-items: center;
        color: #fff;
        direction: ltr;
        display: flex;
        font-size: 0.81rem;
        text-align: center;

        --page-selector-spacing: 4px;
      }

      #pageSelector::selection {
        background-color: var(--viewer-text-input-selection-color);
      }

      input,
      #pagelength {
        /* --page-length-digits is set through JavaScript. 1px is added because
         * the unit 'ch' does not provide exact whole number pixels, and
         * therefore seems to have 1px-off bugginess. */
        width: calc(max(2, var(--page-length-digits)) * 1ch + 1px);
      }

      input {
        background: rgba(0, 0, 0, 0.5);
        border: none;
        color: white;
        font-family: inherit;
        line-height: inherit;
        outline: none;
        padding: 0 var(--page-selector-spacing);
        text-align: center;
      }

      #divider {
        margin: 0 var(--page-selector-spacing);
      }
    </style>
    <div id="content">
      <input part="input" type="text" id="pageSelector" value="[[pageNo]]"
          on-pointerup="select" on-input="onInput_" on-change="pageNoCommitted"
          aria-label="$i18n{labelPageNumber}">
      <span id="divider">/</span>
      <span id="pagelength">[[docLength]]</span>
    </div>