# Perspective - Numeric Input Value Component BUG?

**URL:** <https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908>\
**Category:** Ignition Early Access\
**Created:** [June 23, 2020, 11:41am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908 "2020-06-23T11:41:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![lasse](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lasse/32/11108_2.png) [@lasse](https://forum.inductiveautomation.com/u/lasse)\
**Post date:** [June 23, 2020, 11:41am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/1 "2020-06-23T11:41:21Z")

</div>

Hi,

I recently upgraded to the latest Nightly, after upgrading from 8.0.11 Nightly.  
I see now that the numeric input value component have changed when you click on it?

Two arrows (Up,Down) are now in addition to what is was before, is there any way to disable this?  
I used this component in alot of templates, and this is now screwing everything up 😒

![numeric input](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1b74f7891ff8e13913096525facebc5bc7f930f2.png)

EDIT: I see that on my mobile phone I dont get these arrows, only on desktop.  
Using latest version of Chrome.

---

<div class="post-metadata">

**Author:** ![jmorris](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jmorris](https://forum.inductiveautomation.com/u/jmorris)\
**Post date:** [July 21, 2020, 1:24am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/2 "2020-07-21T01:24:39Z")

</div>

Yep, those arrows are annoying, there should be a way to disable them

---

<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:** [July 21, 2020, 3:12am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/3 "2020-07-21T03:12:40Z")

</div>

You can disable them in 8.0.13 and newer by using a custom property in your theme file.  
[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:** ![lasse](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lasse/32/11108_2.png) [@lasse](https://forum.inductiveautomation.com/u/lasse)\
**Post date:** [August 28, 2020, 7:41am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/4 "2020-08-28T07:41:15Z")

</div>

Theme file? Where can I find that? Can you provide an example if possible?

---

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [August 28, 2020, 12:48pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/5 "2020-08-28T12:48:54Z")

</div>

This might help...

> [@CSS pseudo-elements](http://forum.inductiveautomation.com/t/css-pseudo-elements/34953/4):
>
> It took me a little bit to figure out but it’s actually pretty simple. I just recently downloaded the 8.0.14 nightly (b2020051802) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions. Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes I put my @keyframes into th…

In the linked example I created a 'MyCSS.css' file that is imported into the theme I'm using. If you add

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

```

to your css file, all of up/down (spinner) arrows should be hidden. Y

---

<div class="post-metadata">

**Author:** ![jacque\_trahan](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jacque_trahan/32/58886_2.png) [@jacque\_trahan](https://forum.inductiveautomation.com/u/jacque_trahan)\
**Post date:** [April 5, 2023, 1:53pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/6 "2023-04-05T13:53:48Z")

</div>

For those who are not used to CSS and front end devolvement. The **theme file** is not in ignition, but in the program files folder somewhere?

A step by step on this would be nice if anyone can help. I will use this code:  
[How TO - Hide Arrows From Input Number](https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 5, 2023, 1:55pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/7 "2023-04-05T13:55:58Z")

</div>

> [@jacque\_trahan](#):
>
> The **theme file** is not in ignition, but in the program files folder somewhere?

They are in Ignition's install folder, which is typically in the program files hierarchy on windows.

---

<div class="post-metadata">

**Author:** ![jacque\_trahan](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jacque_trahan/32/58886_2.png) [@jacque\_trahan](https://forum.inductiveautomation.com/u/jacque_trahan)\
**Post date:** [April 5, 2023, 2:02pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/8 "2023-04-05T14:02:30Z")

</div>

Thank you!

I think this will not work in my situation due to the fact I only need this on one view/project and not all ignition projects/views on a clients remote server. Will look for other work arounds.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 5, 2023, 2:50pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/9 "2023-04-05T14:50:30Z")

</div>

Current Ignition also has a per-project stylesheet.

---

<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:** [April 5, 2023, 3:02pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-value-component-bug/35908/10 "2023-04-05T15:02:35Z")

</div>

If you only need these rules in one area, you're better served targeting the specific component.

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

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

```

Couple this with use of the `meta.domId` property to target an individual component.  
 ![Screenshot 2023-04-05 at 8.01.37 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19b03a0afdc0fc168ce75b85a61d39fce51290a0.png)  
 ![Screenshot 2023-04-05 at 8.01.55 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa79308e6827fae0bdf2fdf6dec88e18be79ded2.png)
