# Perspective - Numeric input field invalid style class not applied **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [January 12, 2024, 3:31pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198 "2024-01-12T15:31:15Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 12, 2024, 3:31pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/1 "2024-01-12T15:31:15Z")
Hello guys, I have a problem on Perspective, I'm using Ignition 8.1.35, I created a numeric input field, configured minimum and maximum bounds and the I created a style class to be applied to some input fields when the value is invalid (out of bounds). However the style class is never applied to the input field (color of border and box-shadow should change). I tried also to set base style and not on element style [invalid] but it doesn't change. The only way to apply is to set in the component style value by value and not use a style class ![Screenshot 2024-01-12 162254](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/779b5e2de909e64abf384e332174e92898d4d991.png) ![Screenshot 2024-01-12 162419](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c35b00fa17d1ed33d5f1075ffb3ec0035e7311df.png) ![Screenshot 2024-01-12 162551](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd3dc4d028ff7553860a1ad458a13d5a7e63e3e9.png) ---
**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\ **Post date:** [January 12, 2024, 3:48pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/2 "2024-01-12T15:48:47Z")
You could try using the stylesheet in the Styles folder, for example: ```auto .psc-background { background-image: linear-gradient(to right, rgba(265, 179, 71),rgba(240, 169, 60)); } ``` Then I would just type background into class. ---
**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:** [January 12, 2024, 3:49pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/3 "2024-01-12T15:49:06Z")
I think you just need to, - create a style "InvalidNumber" and set the **Base Style** properties as you require for the invalid condition. - reference that style class: `inputBounds.invalidStyle.classes : InvalidNumber` The style will only be applied when the number is out of range. ![invalidStyle](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15f42d865feefdd5e9a8c8fe8e43568df26c1a3d.gif) Why? CSS invalid is for when the document **element** is invalid. You're setting the CSS for a valid document element with an **invalid value** and that's a different condition. ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 10:26am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/4 "2024-01-15T10:26:28Z")
I tried but still not working ![Screenshot 2024-01-15 112420](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/ff80dc43c603a700cd339f5161d64727d1544ad0.png) ![Screenshot 2024-01-15 112450](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f3f6bf89dc2d1cca13f9bd4a77e9dd61130af22d.png) ![Screenshot 2024-01-15 112816](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b18d69ca9d01839c5e4894035c4826b5b5471b12.png) ---
**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:** [January 15, 2024, 10:36am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/5 "2024-01-15T10:36:56Z")
Your screengrabs seem to show a correct configuration. Is the style class actually in the Components folder? Double-check by re-selecting it from the classes dropdown. (Case matters.) Other comment: Numeric fields should be right-aligned so that units, tens, hundreds, etc., line up vertically. e.g., [gui design numeric entry alignment - Google Search](https://www.google.com/search?q=gui+design+numeric+entry+alignment). ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 10:43am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/6 "2024-01-15T10:43:26Z")
> [@Transistor](#): > > Your screengrabs seem to show a correct configuration. > Is the style class actually in the Components folder? Double-check by re-selecting it from the classes dropdown. (Case matters.) Yes, it is in Components/InputInvalid. Is it possible that style isn't overrided because I have a custom theme and edited .input classes in css files? In case I tried also to add a custom CSS class :invalid and set the same properties but still doesn't work ![Screenshot 2024-01-15 114058](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4dffe601ff20718a4cfbb7c3be9baa8bc6e175da.png) ![Screenshot 2024-01-15 114208](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a09deda020d327ba81577801ef7bdf6f1b7519a6.png) ---
**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:** [January 15, 2024, 10:53am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/7 "2024-01-15T10:53:39Z")
Try commenting out any CSS that might affect it. ```auto /*{ ... } */ ``` ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 11:03am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/8 "2024-01-15T11:03:38Z")
Is the :focus that doesn't allow to apply invalid style. I commented that and now works, but how can I keep both styles? I renamed style to InputField, then set baseStyle to default (empty) and set properties for focus elements state and invalid, then added the class to style (generic) components but only focus works... ![Screenshot 2024-01-15 115913](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56e896e37180b8da00ff5c65718c0e6a9ed9c92a.png) ![Screenshot 2024-01-15 120120](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c3478699490d26115fff78ce3a60909a228976d8.png) ![Screenshot 2024-01-15 120155](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6b9ee5d3392e6d4e9fc853baec7fe8d111579db.png) ![Screenshot 2024-01-15 120201](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/dbe9ae594702bfaa0d35fb0cbbdffeadfc944c6c.png) ![Screenshot 2024-01-15 120215](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5c6dc5730ce52f9564311a7e3be9e97a5ed7638e.png) ---
**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:** [January 15, 2024, 12:06pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/9 "2024-01-15T12:06:28Z")
The Element State [Invaliid] doesn't do what you want because the component **is** valid as discussed before. It's the **value** that is invalid. I think you are correct that the CSS stylesheet is overriding the `inputBounds.invalidStyle` class. I suspect that there's a way around this by injecting the CSS `!important` rule in the right place - but I don't know where. ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 12:29pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/10 "2024-01-15T12:29:05Z")
I tried to do some tricks like use another CSS class to set :invalid on inputField with !important but didn't work. Tried also to add 2 different classes, one for focus and another for invalid value and nothing... Seems like focus always overrides invalidStyle. If I disable focus style the invalidBounds always works but I don't find a solution to keep both working ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [January 15, 2024, 12:51pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/11 "2024-01-15T12:51:46Z")
Try this on your selected style, you'll have to keep this :not updated if you change your other class name ```auto .ai_inputField:not(.psc-Components\/InvalidInput):focus ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4caf01c74f928e1ebe4d4e9fc58a59825c366d59.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a58c0ce1d943bb0108f79b7a3c0c3b073603dbbd.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/00e23685912f2c17e20f08b8b1da0b7898d1b137.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84d63b3fc542b6749748c68b48c286d951550b0f.png) ```auto .ia_inputField:not(.psc-invalidTest):focus{ border: green solid; } .psc-invalidTest{ border: red solid; } ``` Btw you should add custom css in the stylesheet.css, not by editing the css files. Those changes might dissapear on update. [https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet) ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 9:07pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/12 "2024-01-15T21:07:32Z")
Thanks a lot @victordcq it worked. I decided to edit directly .css files because I created my own theme so a lot of things I prefer to edit and not to override with a lot of !important ![Screenshot 2024-01-15 220603](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e01b14c2e759385c811ceb0f6717556f2aed888b.png) ![Screenshot 2024-01-15 220612](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/283bdf010461ec7c6d5b9468e8757734a4899689.png) ![Screenshot 2024-01-15 220619](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc3c6c1d88cd0acee51bf0948f792b207eab670c.png) ---
**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:** [January 15, 2024, 9:32pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/13 "2024-01-15T21:32:33Z")
> [@davee\_s](#): > > I decided to edit directly .css files The default themes **will** be overwritten on Ignition update or re-install. You can prevent that using the CSS `@import` instruction in your own theme file. [https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes](https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes) ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 15, 2024, 9:54pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/14 "2024-01-15T21:54:52Z")
Yes this is what I have done. I created a folder into %installDirectory%\data\modules\com.inductiveautomation.perspective\themes and copied all .css files from default theme light to a new custom theme, then I edited and added extra css code to customize the appearence of components and other. I have tried now to update to 8.1.36 and the custom theme has been kept, fortunately 🥶 ---
**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:** [January 15, 2024, 10:19pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/15 "2024-01-15T22:19:33Z")
> [@davee\_s](#): > > ... and copied all .css files ... I dont' think that's quite what IA are recommending. You won't have the benefit of CSS for any new controls or features in future releases. The `@import` method uses the default CSS through the `@by` as a base and your rules (which follow that line) add to, or override the default CSS. You then end up with your own theme files with relatively few lines to maintain. ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 16, 2024, 8:59am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/16 "2024-01-16T08:59:50Z")
Mmm interesting, so what do you advise? To @import all default .css files from a default theme and then create only 1 .css custom file to add customizations? ---
**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:** [January 16, 2024, 10:29am UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/17 "2024-01-16T10:29:13Z")
Yes, I'd do it as recommended in [Creating and Using Custom Perspective Themes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes). If you offer your users light and dark mode then you would need to do that twice. I have generally used the default light and dark themes and [built-in theme colors](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-Built-inThemeColors) so haven't had to do this much. I did find that most of the charts (all built on AM Charts components) don't support CSS variables and so I had to create some session variables for light and dark themes. I created an expression binding on these to switch the colour depending on the selected them. e.g., A chart pen needs to be dark for the light theme, etc., so the expression would be like: ```auto if( left({session.props.theme}, 4 = "dark", #e0e0e0, // Light color. #202020 // Dark color. ) ``` I bind the chart colors to the appropriate session variables. Now if I create my own themes I just have to make sure the dark ones' names start with "dark" and my expressions will work. ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 16, 2024, 12:29pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/18 "2024-01-16T12:29:36Z")
Oh, so now I need to compare all differences from default light theme and my custom theme .CSS files and then paste only the differences in a new .CSS file that will be my custom theme ---
**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:** [January 16, 2024, 1:38pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/19 "2024-01-16T13:38:24Z")
Correct. That'll be easy though because you will have put a little comment on each style that you edited. 🫢 ---
**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\ **Post date:** [January 16, 2024, 2:07pm UTC](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198/20 "2024-01-16T14:07:07Z")
Moved now to only one .CSS file with @import the default light theme. Thanks for suggestions [Next page](https://forum.inductiveautomation.com/t/perspective-numeric-input-field-invalid-style-class-not-applied/84198.md?page=2)