Question

我有各种HTML元素，每个Drag'n'Drop都可以移动。要指出用于删除元素的有效区域（对用户），我正在更改游标外观。我通过简单地通过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;
}

这将覆盖所有输入元素的'cursor'属性。

修改

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

Answer 2

首先让我们创建输入并将其命名为changeCrusor

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

第二个让我们自己创建类（在您的情况下，可能会覆盖您可以使用的默认输入行为！重要，但实际上并没有推荐的方式来做事情

.changeCrusor {cursor: text !important;}

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

2 个答案: