Change mouse cursor over input elements in HTML

Question

I have various HTML elements which are moveable per Drag'n'Drop. To point out the valid areas for dropping the element (to the user) i'm changing the cursors appearance. I do this by simply appling CSS classes via JS which contain a simple "cursor:xxx". This works fine for DIVs and SPANs.

But when I try to do that with a text input or a textarea the cursor just becomes the "|" (text edit cursor).

Is there a way to override this default behaviour or are there any workarounds (without having to replace these elements with any dummies since that would take a lot of time as some functions relay on these elements)

CSS:

body.draggingInvalid ,
body.draggingInvalid * {
    cursor:not-allowed !important;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

HTML:

<input type="text" style="width: 200px; height: 20px;">

Answer 1

Try using !important

input {
    cursor: pointer !important;
}

This will override 'cursor' property of all input elements.

EDIT:

If this doesn't work, double check your selector. You might wanna add space between body and .draggingInvalid

body .draggingInvalid {
}