在 Firefox 中删除数字类型纸张输入的微调器

Question

我想在所有浏览器中隐藏 paper-input 3.x 上的数字微调器。我目前正在努力将其隐藏在 Firefox 上。

顶部 here 描述的解决方案适用于 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 放在一个 mixin 中：

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

我不确定我是否使用了不正确的 mixin，或者是否有更简单的 vanilla CSS 方法来解决这个问题。 type="number" 输入对于移动平台是必需的，但我的用例不希望使用微调器。

Answer 1

您可以在 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>

Demo

Answer 2

经过一天的折腾，终于解决了自己的问题。看起来 var(--paper-input-container-shared-input-style_-_-webkit-appearance) 在 Firefox 上自动设置为 <input> 的 -moz-appearance 的值。

我能够这样做以删除 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

在 Firefox 中删除数字类型纸张输入的微调器

Remove spinner on number type paper-input in Firefox

css

firefox

polymer

paper-elements

polymer-3.x