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

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

0 голосов
/ 26 января 2019

Я хотел бы скрыть счетчик чисел на paper-input 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 не работает для paper-input 3.0): https://glitch.com/edit/#!/freckle-lilac

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

Ответы [ 2 ]

0 голосов
/ 26 января 2019

После дня возни я смог решить свою проблему.Похоже, что var(--paper-input-container-shared-input-style_-_-webkit-appearance) автоматически устанавливается как значение для <input> -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/#!/zippy-crime

0 голосов
/ 26 января 2019

Вы можете использовать пользовательский стиль ввода с 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>

Демо

...