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在纸张输入3.0中不起作用）： https://glitch.com/edit/#!/freckle-lilac

我不确定是否使用了不正确的mixin，或者是否有更简单的原始CSS方式来解决此问题。 type="number"输入对于移动平台是必需的，但对于我的用例而言，微调器不是理想的。

Answer 1

经过一天的修补，我得以解决自己的问题。看起来var(--paper-input-container-shared-input-style_-_-webkit-appearance)已自动设置为Firefox上<input>的{{1}}的值。

我能够执行此操作，以删除Chrome和Firefox上的微调器，并解决出现的宽度问题：

-moz-appearance

演示：https://glitch.com/edit/#!/zippy-crime

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>

Demo

在Firefox中删除数字输入纸上的微调器

2 个答案: