# Component Styling Issue **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 4, 2026, 9:36pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772 "2026-02-04T21:36:23Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [February 4, 2026, 9:36pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/1 "2026-02-04T21:36:23Z")
I have been working on this view for a while and for some reason my start and end time DateTimeInput components are not responding to my styles. I have an advanced style sheet set up to change the border radius that doesn’t appear to be working. In an attempt to test out the problem, I added styles to the style class and those styles also failed to do anything! Am I missing something or doing something wrong? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e0edb811aa2b0e5185ca3f1e3fb66355b355351.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b7bb1fa42158fa2803bdc37fa4b2cef973fe5dbd.png) Advanced Style Sheet CSS code: `.psc-dropdown-pill { border-radius: var(--input-border-radius) !important; }` ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 4, 2026, 9:41pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/2 "2026-02-04T21:41:17Z")
`--input-border-radius` what is this set to? The reason your direct styles aren’t working is because of the `!important` in the stylesheet If that variable is set to something other than what’s being produced, it could be being set somewhere else which is overriding the value. Open the dev tools in the designer and check its value from there ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [February 4, 2026, 9:43pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/3 "2026-02-04T21:43:46Z")
Did you actually create a Style named “dropdown-pill”? i.e., does it appear in the dropdown for `classes` or did you just type it in manually? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 4, 2026, 9:45pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/4 "2026-02-04T21:45:44Z")
> [@richhull](#): > > Advanced Style Sheet CSS code: > `.psc-dropdown-pill { border-radius: var(--input-border-radius) !important; }` > [@Ryan\_Deardorff](#): > > you actually create a Style named “dropdown-pill”? I can’t reorder quotes on mobile it seems… But that adv stylesheet rule creates that style class, and looks correct. You’re not r_equired t_o create a corresponding perspective style, although it’s highly encouraged so that it does appear in the dropdowns ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [February 4, 2026, 9:46pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/5 "2026-02-04T21:46:52Z")
The --input-border-radius is defined above, sorry for not including it. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/03d9d51bd0829ad5848d13707628d11158f2ed42.png) I also know that this style class works because I applied it to other components that have applied the border radius successfully ---
**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:** [February 4, 2026, 9:47pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/6 "2026-02-04T21:47:22Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a0badbd95bb12ca58f2744f0bad7541ee7e2cc7.png) In the browser, hit F12 for Developer tools. 1. Inspect tool. 2. Select the DatePicker. 3. Note the applicable styles. 4. Find it in the CSS pane. 5. Here you go. Override that in your Advanced Stylesheet. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 4, 2026, 9:48pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/7 "2026-02-04T21:48:01Z")
That border is definitely larger than 6px so I'd be checking the dev tools in the designer (from the help? Menu) Edit: Tools\* menu →External debugger > **[Tools Menu​ - Perspective Designer Interface | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.3/ignition-modules/perspective/perspective-designer-interface#tools-menu)** > > Perspective's workspace makes use of the general Tools Menu options. However, the Launch Project item holds several unique sub options. | The Perspective Designer Interface includes a number of panels and menus containing functionality that allow you... If styles aren’t working, dev tools are the first place to go ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [February 4, 2026, 9:53pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/8 "2026-02-04T21:53:11Z")
My worry is that wouldn’t this overwrite all DateTimeInput fields across the project? ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [February 4, 2026, 9:55pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/9 "2026-02-04T21:55:22Z")
I think you need to add `.ia_dateTimeInputComponent` which gets added along with your custom style: ```python .psc-dropdown-pill, .psc-dropdown-pill .ia_dateTimeInputComponent { border-radius: var(--input-border-radius) !important; } ``` ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [February 4, 2026, 9:57pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/10 "2026-02-04T21:57:18Z")
That sadly did not work. It is odd though because even using the regular styles options, the component does not change. Like setting the font size to 60px ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 4, 2026, 9:57pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/11 "2026-02-04T21:57:55Z")
> [@Ryan\_Deardorff](#): > > think you need to add `.ia_dateTimeInputComponent` It’s the ia\_input that applies the border, not the datetime one. How he’s got it should be OK as it should be overriding the ia input border, just need to check dev tools to see why it isnt ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [February 4, 2026, 10:04pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/12 "2026-02-04T22:04:09Z")
I think the class needs to go under the `inputProps` style, not the main one: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/318eedce2b32d15d46485a2739e7bf7bebf8aefc.png) ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [February 4, 2026, 10:05pm UTC](https://forum.inductiveautomation.com/t/component-styling-issue/113772/13 "2026-02-04T22:05:57Z")
That did the trick! Odd that it’s in a different spot but I am glad it worked! Thank You!