How to Hide Arrows From Input Number

Showcase Tips and Tricks
1

I was asked how to remove these arrows, so I will be posting some CSS code you can use below.

image
image1060×256 25 KB

The CSS code is as follows.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

image
image1752×882 93.7 KB

1 Like
2

is there also a way turn off the scroll wheel input? whenever I hover over number field and scroll my values get messed up. so annoying

3

Hello @andreas , this code will prevent the mouse wheel from manipulating a number input field. Paste it into the Javascript tab and change the component #. If anyone knows how to apply this layout wide instead of component by component let me know!

// Prevent number input with mouse wheel
TB.render('component_3', function(data) {
    // Disable mouse wheel for number inputs only when they are focused
    $('.t-form-number').on('wheel', function(event) {
        if ($(this).is(':focus')) {
            event.preventDefault();
            
            // Allow page smooth scrolling even when the mouse is in the focused field
            let delta = event.originalEvent.deltaY;
            window.scrollTo({
                top: window.scrollY + delta,
                behavior: 'smooth'
            });
        }
    });
});
1 Like
4

what do I need to change to disable that completely even, when its focussed. I’m rubbish in JS.

5

Hello, this code should disable the mouse wheel’s ability to change the value in a number field even when it is in focus. If it is not:

  • Make sure that you have uploaded it to the javascript tab of the form or the page that contains the form.

  • Also, make sure that you have changed component_3 to the number of your form.
    image

1 Like
6

it does deactivate scroll wheel input on hover, which is already a big improvement, but when the field is focused the scrolling still acts as an input…
ahhh okay. I just copied and pasted and put it on the layout js tab, cause I never want that for any component. didn’t even realize it component based…

7

@andreas Would you mind sending me a short video of what you are talking about? I can not tell from your last reply if you got it to work or not.

Best,
Seth

8

its working. I was using it wrong