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

【问题标题】：Change mouse cursor over input elements in HTML在 HTML 中的输入元素上更改鼠标光标
【发布时间】：2013-04-24 11:55:07
【问题描述】：

我有各种 HTML 元素，可以通过 Drag'n'Drop 移动。为了指出删除元素的有效区域（给用户），我正在更改光标外观。我通过简单地通过包含一个简单的“cursor:xxx”的 JS 应用 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;">

【问题讨论】：

你在使用jQuery draggable()吗？
看起来你的代码对我有用。您在其他地方有覆盖它的东西：tinker.io/5aaa7
或仔细检查您的选择器..

标签： html css drag-and-drop mouse-cursor

【解决方案1】：

尝试使用 !important

input {
    cursor: pointer !important;
}

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

编辑：

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

之间添加空格

body .draggingInvalid {
}

【讨论】：

OP 是使用!important.
如果它在某个时候确实有效，则不再有效

【解决方案2】：

首先让我们创建输入并给它一个名为 changeCrusor 的类

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

第二个让我们创建自己的类（在你的情况下，也许某些东西会覆盖你可以使用的默认输入行为！重要但它真的不推荐做事的方式

.changeCrusor {cursor: text !important;}

【讨论】：