Удалите счетчик на бумаге для ввода чисел в Firefox

Question

Я хотел бы скрыть счетчик чисел на входе бумаги 3.x во всех браузерах. В настоящее время я пытаюсь скрыть это только на Firefox.

Решение, описанное вверху, работает на Chrome, но -moz-appearance: textfield не влияет на внутреннюю <input> элемент. Я просто добавляю схему к <paper-input> элемент.

return html`
    <style>
      paper-input {
        --paper-input-container-input-webkit-spinner: {
          -webkit-appearance: none;
          margin: 0;
        }
        -moz-appearance: textfield;
      }
    </style>
    <paper-input type="number" value="123"></paper-input>
`;

Результаты в:

Я также пытался разместить -moz-appearance внутри миксин:

return html`
    <style>
      paper-input {
        --paper-input-container-input-webkit-spinner: {
          -webkit-appearance: none;
          margin: 0;
        }
        --paper-input-container-shared-input-style: {
          -moz-appearance: textfield;
        }
      }
    </style>
    <paper-input type="number" value="123"></paper-input>
`;

Результаты в:

Я создал небольшую страницу, чтобы продемонстрировать ее (JSBin/unpkg не работает для ввода бумаги 3.0): https://glitch.com/edit/

Я не уверен, что я использую неправильный миксин или есть более простой ванильный CSS-способ исправить это. type="number" ввод необходим для мобильных платформ, но спиннер не желателен для моего случая использования.

Answer 1

После дня возни, я смог решить свою проблему. Это выглядит как var(--paper-input-container-shared-input-style_-_-webkit-appearance) автоматически устанавливается в качестве значения для <input>"s -moz-appearance на Firefox.

Я смог сделать это, чтобы удалить спиннер в Chrome и Firefox, а также исправить возникшую проблему ширины:

<style>
   paper-input {
     --paper-input-container-input-webkit-spinner: {
       -webkit-appearance: none;
     }
     --paper-input-container-shared-input-style: {
       width: 50px;
       -webkit-appearance: textfield;
     }
     width: 50px;
   }
</style>

Демо: https://glitch.com/edit/

Answer 2

Вы можете использовать пользовательский стиль ввода с paper-input-container а также iron-input, но нет paper-input вот пример ниже:

<paper-input-container>
       <div slot="prefix">Numbers ? :</div>
       <label slot="label">Your value..? </label>
       <iron-input slot="input" type="number" value="{{myValue}}">
          <input value="{{myValue::input}}" style="/*! outline: none; (not working)*/width: 100%;border-color: transparent;">
       </iron-input>
</paper-input-container>

демонстрация