更改 HTML 中输入元素上的鼠标光标

Question

我有各种可通过拖放移动的 HTML 元素。为了指出（向用户）放置元素的有效区域，我正在更改光标的外观。我通过简单地通过 JS 应用 CSS 类来做到这一点，其中包含一个简单的“cursor:xxx”。这对于 DIV 和 SPAN 来说效果很好。

但是当我尝试使用文本输入或文本区域执行此操作时，光标就会变成“|” （文本编辑光标）。

有没有办法覆盖此默认行为或者是否有任何解决方法（无需用任何虚拟元素替换这些元素，因为这会花费大量时间，因为某些功能会依赖这些元素）

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

尝试使用!important

input {
    cursor: pointer !important;
}

这将覆盖所有输入元素的“光标”属性。

编辑：

如果这不起作用，请仔细检查您的选择器。您可能想在body和.draggingInvalid之间添加空格

body .draggingInvalid {
}