# Numeric Entry Field Arrows/Spinners

**URL:** <https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986>\
**Category:** Ignition\
**Created:** [August 16, 2021, 9:54pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986 "2021-08-16T21:54:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![dslemmer](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dslemmer](https://forum.inductiveautomation.com/u/dslemmer)\
**Post date:** [August 16, 2021, 9:54pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/1 "2021-08-16T21:54:30Z")

</div>

Hi,

I am working on creating numeric entry fields for the plant operators to set the priority of some different devices in the field. Does anyone know if there is a way to hide/disable the “arrows” when you click on the field to enter a number? Tech support thought you might be able to use @keyframes to remove them but I couldn’t figure it out.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fdd63f85c0bdd33ed80738f991eb3d19af66bdfd.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 16, 2021, 9:57pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/2 "2021-08-16T21:57:19Z")

</div>

Via theming, you can set some non-standard properties for the browsers you care about:  
[https://www.w3schools.com/howto/howto\_css\_hide\_arrow\_number.asp](https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp)

---

<div class="post-metadata">

**Author:** ![dslemmer](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dslemmer](https://forum.inductiveautomation.com/u/dslemmer)\
**Post date:** [August 17, 2021, 12:32am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/3 "2021-08-17T00:32:56Z")

</div>

I had seen this thread and tried what I thought was correct but I’m clearly doing something wrong. Here’s what I have in my .css file. Is it obvious what I’m doing wrong?

@keyframes removeSpinner {  
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  
-webkit-appearance: none;  
padding: 0px 0px;  
margin: 0;  
}  
}

---

<div class="post-metadata">

**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\
**Post date:** [August 17, 2021, 3:09am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/4 "2021-08-17T03:09:19Z")

</div>

Make sure it is in your numeric entry field .css and that your custom theme is being used in the project. Also make sure that it is compatible with the browser you are using, firefox doesn’t support those elements. You don’t need @keyframes either.

```auto
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

```

---

<div class="post-metadata">

**Author:** ![dslemmer](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dslemmer](https://forum.inductiveautomation.com/u/dslemmer)\
**Post date:** [August 17, 2021, 1:41pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/5 "2021-08-17T13:41:18Z")

</div>

That works! Took out the @keyframes and placed this code in the numeric-entry-field.css file.

Thank for the help!

---

<div class="post-metadata">

**Author:** ![dslemmer](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dslemmer](https://forum.inductiveautomation.com/u/dslemmer)\
**Post date:** [August 17, 2021, 1:51pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/6 "2021-08-17T13:51:23Z")

</div>

New question. Is there a way to implement this same feature in Perspective Workstation?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 17, 2021, 2:58pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/7 "2021-08-17T14:58:18Z")

</div>

Workstation uses Chromium for rendering, so the `webkit` properties should work there.

---

<div class="post-metadata">

**Author:** ![dslemmer](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dslemmer](https://forum.inductiveautomation.com/u/dslemmer)\
**Post date:** [August 17, 2021, 3:47pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/8 "2021-08-17T15:47:49Z")

</div>

Is there something that I need to do differently? When I open the application with chrome the arrows aren’t there but when I open the app using perspective workstation, they still show up.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 17, 2021, 3:56pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/9 "2021-08-17T15:56:49Z")

</div>

You’re in the realm of unsupported behavior, so it’s hard to say. I can guarantee that Workstation uses Chromium for rendering, which should obey webkit properties. I don’t see anything in JxBrowser’s documentation about not following webkit flags, or requiring you to opt in to them, so I don’t know what’s happening. You could try clearing your `.ignition` cache; maybe the browser is caching old themes and not getting your updated theme.

---

<div class="post-metadata">

**Author:** ![MikeAllgood](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@MikeAllgood](https://forum.inductiveautomation.com/u/MikeAllgood)\
**Post date:** [October 29, 2021, 6:50pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/10 "2021-10-29T18:50:19Z")

</div>

Sorry to hijack this thread, but is there a way to hide the arrows on SOME numeric entry field components and not on others?  
From what little I know about CSS, if I create a custom them so that these are hidden and use that theme for my project, then ALL of the spinner buttons on all the numeric entry fields in the project will be hidden. Am I wrong about that?  
If not, how could some be shown and specific ones have the spinners hidden?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 29, 2021, 6:57pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/11 "2021-10-29T18:57:46Z")

</div>

You would need to use a custom class which disables them and apply that class as needed.

---

<div class="post-metadata">

**Author:** ![MikeAllgood](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@MikeAllgood](https://forum.inductiveautomation.com/u/MikeAllgood)\
**Post date:** [October 29, 2021, 7:03pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/12 "2021-10-29T19:03:49Z")

</div>

That’s a bit outside my wheelhouse, plus I don’t think it would be worth the effort in my case. Thanks!

---

<div class="post-metadata">

**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\
**Post date:** [November 2, 2021, 3:39am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/13 "2021-11-02T03:39:14Z")

</div>

I think it's going to be possible to enable/disable spinners on a per component basis in one of the new updates.

> [@Nightly 8.1 Changelogs - 2021](https://forum.inductiveautomation.com/t/nightly-8-1-changelogs-2021/42410/169):
>
> Nightly Changelog: 8.1.12-b20211013 Visualization 1500: Numeric Entry Field: option to toggle spinner and adjust increment A new prop has been added to the Numeric Entry Field to control the spinner - props.spinner.enabled will display a spinner when true, and props.spinner.increment controls the amount to increment(or decrement) the value when using the spinner. 4486: The view parameters suggestion submenu of the JSON editor is displaying deleted view parameters Deleting a param from a vie…

---

<div class="post-metadata">

**Author:** ![MikeAllgood](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@MikeAllgood](https://forum.inductiveautomation.com/u/MikeAllgood)\
**Post date:** [November 4, 2021, 4:41pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/15 "2021-11-04T16:41:49Z")

</div>

Never mind! I found it.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 25, 2023, 10:17am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-arrows-spinners/49986/16 "2023-11-25T10:17:22Z")

</div>

It would have been really nice if you had told us where you found it.
