在HTML中更改输入元素上的鼠标指针

Question

我有许多可通过拖放移动的HTML元素。为了向用户指出元素可以放置的有效区域，我会更改光标的外观。我通过JS应用包含简单“cursor:xxx”的CSS类来实现这一点。对于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;">

- user1557232

---

你正在使用jQuery draggable()吗？ - Jude Duran

在我看来，你的代码似乎是可以工作的。但是你可能有其他地方覆盖了它：http://tinker.io/5aaa7 - cimmanon

请检查您的选择器是否正确。 - Jude Duran

Answer 1

尝试使用!important

input {
    cursor: pointer !important;
}

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

编辑：

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

body .draggingInvalid {
}

- Jude Duran

---

OP正在使用!important。 - cimmanon

如果曾经有效，但现在不再有效。 - oldboy

Answer 2

首先让我们创建一个名为"changeCursor"的输入框，并给它赋予一个类。

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

其次，让我们创建类本身（在您的情况下，可能是某些内容覆盖了输入的默认行为，您可以使用 !important，但这真的不是推荐的做法）

.changeCrusor {cursor: text !important;} 

- nedy