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 {
}

Answer 2

first lets create input and give it class named changeCrusor

<input id='test' class="changeCrusor" placeholder='nedys answer'>

second lets create the class its self (in your case maybe something overrides the default behavior of input you can use !important but its realy dont recomended way to do things

.changeCrusor {cursor: text !important;}