I am working with a variety of HTML elements that can be moved via Drag'n'Drop. In order to indicate to the user where these elements can be dropped, I change the cursor's appearance using CSS classes applied through JavaScript. This method works well for DIVs and SPANs.
However, when attempting to do this with a text input or textarea, the cursor defaults to "|" (text edit cursor).
Is there a way to override this default behavior, or are there any alternatives that do not involve replacing these elements with dummies (as some functions rely on them) which would be time-consuming?
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;">