fr1sk fr1sk - 3 months ago 16
CSS Question

Polymer 1.0 paper-input disable spinner on type="number"

My question is same as the title, how to disable spinner on polymer 1.0 paper-input component where the type is number.

<paper-input type="number" label="Discount"></paper-input>

enter image description here

I want to disable those arrows on the right side of paper-input.


I can offer you a bodge if you like, I don't think there is a way to stop the spinner coming up. But what we can do is make it text and prevent the user from inputting anything but numbers.

var numberInputSel = document.querySelectorAll("paper-input.number");
for (var i = 0; i < numberInputSel.length; ++i) {
  numberInputSel[i].addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
  numberInputSel[i].addEventListener("touchstart", function(evt) {
    this.setAttribute("type", "number")
<base href="">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">

<paper-input label="Amount" value="35" class="number"></paper-input>


I've made a slight edit, now when people touch it on mobile it will set the type as number (meaning the numeric keyboard shows) but on desktop it stays as text.