Remove spinner on number type paper-input in Firefox

Question

I would like to hide the number spinner on paper-input 3.x in all browsers. I'm currently struggling to hide it on just Firefox.

The solution described at the top here works on Chrome, but -moz-appearance: textfield does not affect the inside <input> element. I just adds an outline to the <paper-input> element.

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

Results in:

I also tried placing the -moz-appearance inside a 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>
`;

Results in:

I created a glitch page to demo it (JSBin/unpkg don't work for paper-input 3.0): https://glitch.com/edit/#!/freckle-lilac

I'm not sure if I'm using the incorrect mixin, or if there's a simpler vanilla CSS way to fix this. The type="number" input is necessary for mobile platforms, but the spinner is not desirable for my use case.

Answer 1

After a day of tinkering around, I was able to solve my own problem. It looks like var(--paper-input-container-shared-input-style_-_-webkit-appearance) is automatically set as the value for the <input>'s -moz-appearance on Firefox.

I was able to do this to remove the spinner on Chrome and Firefox, as well as fix the width issue that came up, too:

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

Demo: https://glitch.com/edit/#!/zippy-crime