Css 移除Firefox中数字类型纸张输入的微调器

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

顶部描述的解决方案适用于Chrome，但是

-moz外观：textfield

不会影响内部

元素。我只是在

元素中添加了一个大纲

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>
`;

结果：

我创建了一个小故障页面来演示它（JSBin/unpkg不适用于纸质输入3.0）：

---

我不确定我是否使用了不正确的mixin，或者是否有更简单的香草CSS方法来解决这个问题。移动平台需要

type=“number”

输入，但我的用例不需要微调器

您可以对

纸张输入容器

和

熨斗输入

使用自定义输入样式，但不能使用

纸张输入

，如下示例：

<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>

数字
你的价值。。？

---

经过一天的修修补补，我终于解决了自己的问题。它看起来像是

var（-paper-input-container-shared-input-style_---------; webkit外观）

被自动设置为Firefox上

的

-moz外观的值

我可以这样做，以删除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>


纸张输入{
--纸张输入容器输入webkit微调器：{
-webkit外观：无；
}
--纸张输入容器共享输入样式：{
宽度：50px；
-webkit外观：textfield；
}
宽度：50px；
}

演示：

<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>