Hide qinput arrows when type=number

[bfreed]

Using QInputs on both iPads and desktop.
Setting type=“number” fixes my iPad annoyance - it brings the keyboard up in number mode, yay!
Looks great, too.
But on desktop, there are these arrow icons. I can live with it on Chrome, as they only show up when the cell is active.
But on Firefox they’re always visible and pretty rough:

Anyone know a trick to disable/hide them?

(just to be clear: I’m not saying it’s a bug, or Quasar’s fault - I’m a novice… Is there a CSS trick or something that’s super obvious to everyone else?)

[s.molinari]

Not sure it is the best solution. But, I found it on the Internet and testing quickly with Chrome, it looks like it works.

https://codepen.io/smolinari/pen/pmdLrZ

Scott

[bfreed]

@s-molinari Perfect! Thank you!

[bjbk]

Just a note: Be sure the style is not scoped to your component.
In Electron this works:

<style>
input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>

But, <style scoped>…</style> doesn’t.

Scoping the style appears to work in browsers, but failed for me in Electron.