TextBox Scroll-To-Increment only on some browsers

Anvil Q&A
1

So I have an app to track reagent consumptions, and one of the users gave me feedback on how they would like the scroll-to-increment feature on the TextBox components to be removed. This was the first time I’d heard of this and so I investigated and found that it actually is a feature, but its availability varies across browsers.

In the attached image I have a Firefox, Edge, and Chrome browser (left to right) all on the same webpage where this occurs. It seems like Firefox is the only browser that shows this available feature (additionally indicated by the up and down arrows), where you can increment the value by entering the TextBox and using your scroll wheel, or by pressing on the arrows.

image
image1100×1108 91.4 KB

I couldn’t find any documentation on this, so I was wondering if this was intended? And if so, if there was a way to disable it?

2

Hi @vquach,

The scroll-to-increment UI is implemented by browsers not Anvil. Here is an article which, although slightly out of date, discusses the different implementations:

To remove the spinners, you need to add the following to your app’s CSS:

input[type=number] {
  -moz-appearance: textfield;
}

I hope that helps. :slightly_smiling_face:




If anyone is interested, I also found out how to add the number input spinners to Chromium-based browsers:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
}

input::-webkit-inner-spin-button {
  opacity: 1;
}
2 Likes
3

Hey @ryan, thanks for the clarification! I tried out the CSS snippet and it seems to have removed the spinner incrementation icon. However, the functionality of it is still there so when I scrolled up and down it was incrementing the input by 1 for each scroll. Is there a way to disable both the icon and the functionality?