CODEWITHSUNDEEP
cssfirefoxpolymerpaper-elementspolymer-3.x
Charlie Laabs
Charlie Laabs

Reputation: 173

Remove spinner on number type paper-input in Firefox

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.

Upvotes: 1

Views: 2388

Answers (2)

Charlie Laabs
Charlie Laabs

Reputation: 173

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

Upvotes: 2

Cappittall
Cappittall

Reputation: 3441

You may use custom input styling with paper-input-container and iron-input, but not paper-input here below example: 

<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

Upvotes: 0

Related Questions