Cursor shape on wizard elements is always pointing finger

Hello everyone,

We have recently switched to reactive. As a part of our application we are using a wizard. This works fine except for one thing. When you move your mouse over the wizard elements, the pointer always turns to a pointing finger, even if there is no onClick implemented on the step. Our client would like to only see the finger on wizards steps that have status active and past.

In the below image, step 1 is active, step 2 and 3 have status Next.

The getWizardStepStatus(...) method return one of the three allowed statuses.

When I explore the generated html, I notice this is caused by a style element as shown below.

I've been trying to add ExtendedClass, which has cursor:none, but that doesn't seem to help.


Is there a way remove or overwrite "cursor: pointer;" ?

Thanks.

Solution

Hi Gino,

The only way I can see to solve this is to use '!important' in css to override the cursor:pointer in the style tag.

'!important' is not something I would normally promote using, but I see no other option in this case.

I tried the following, and that seemed to solve your problem:

.wizard-wrapper-item.next {
    cursor: initial !important;
}

That way the cursor is reset to the default cursor for all wizard steps with the 'next' class.

Hope this helps.

Solution

Thanks. This works. You can also use cursor: default !important, that way it stays an arrow instead of turning onto the "edit" one.