# 'Pointer' cursor on DateInput component

**URL:** <https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 1, 2025, 9:03pm UTC](https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144 "2025-10-01T21:03:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bushmatic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bushmatic/32/87014_2.png) [@Bushmatic](https://forum.inductiveautomation.com/u/Bushmatic)\
**Post date:** [October 1, 2025, 9:03pm UTC](https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144/1 "2025-10-01T21:03:58Z")

</div>

I have a `DateTime Input` component (date and time), and I want to show a **pointer** cursor on hover instead of the default **text** cursor.

The appropriate style class is applied to the component, like is described in [this thread](https://forum.inductiveautomation.com/t/change-mouse-cursor-to-hand-on-mouse-hover/30789).

On hover in the designer, the cursor is a **pointer** like I would expect. But when running in a browser (tried in both Edge and Chrome), I am still getting the **text** cursor when hovering over the component.

This component is contained in a flex container – would that be interfering with the hover behavior? The only other factor that might be at play here is a quick startup event script on the overarching root container that writes a timestamp to the component’s `value` property. No bindings are applied to the component.

---

<div class="post-metadata">

**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:** [October 1, 2025, 9:06pm UTC](https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144/2 "2025-10-01T21:06:11Z")

</div>

No need for the on hover element state, just add the pointer cursor to the normal state (base style)

---

<div class="post-metadata">

**Author:** ![Bushmatic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bushmatic/32/87014_2.png) [@Bushmatic](https://forum.inductiveautomation.com/u/Bushmatic)\
**Post date:** [October 1, 2025, 9:30pm UTC](https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144/3 "2025-10-01T21:30:15Z")

</div>

Just tried it and the same thing is happening – cursor is a pointer in the designer, but text input style in browser 🤔

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [October 2, 2025, 12:06am UTC](https://forum.inductiveautomation.com/t/pointer-cursor-on-dateinput-component/111144/5 "2025-10-02T00:06:03Z")

</div>

The object that the standard cursor is being applied is not the base input field. It's a wrapper in the DOM. The input element has a `cursor: text` property

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/2611fd387d53b8008b0a8d39f04ca9990115337e.png)

You can use this class to target the input field inside of the input component.  
Add the following to the advanced style sheet, then add the class `pointer` to the input field.

```css
.psc-pointer *{
  cursor: pointer !important;
}

```