Vue项目中如何隐藏禁用状态表单字段hover时显示的禁用图标

你设置的cursor: none不生效通常有两个核心原因：

• CSS选择器优先级低于浏览器默认禁用样式、或者你使用的UI组件库的内置样式，被覆盖
• 禁用元素本身/其父元素设置了pointer-events: none，元素无法接收鼠标事件，自定义cursor属性不会触发

方案1：直接强制覆盖禁用元素样式 #

针对原生表单元素或者自定义字段，用高优先级选择器指定样式：

/* 可替换为你具体的字段类名，优先级更高 */
input:disabled,
textarea:disabled,
select:disabled,
.custom-field:disabled {
  /* 要完全隐藏光标写cursor: none !important，要默认箭头写cursor: default !important */
  cursor: default !important;
  /* 如果仍不生效，加下面这行，保证元素可以接收鼠标事件触发cursor */
  pointer-events: auto !important;
}

方案2：针对UI组件库封装的表单组件调整 #

如果你用的是Element UI、Ant Design Vue这类组件库，禁用状态下组件会在外层容器加禁用类，且内部输入框默认设pointer-events: none，直接改外层容器的cursor即可：
以Element UI为例：

.el-input.is-disabled,
.el-select.is-disabled {
  cursor: default !important;
}

Ant Design Vue示例：

.ant-input[disabled],
.ant-select-disabled .ant-select-selector {
  cursor: default !important;
}

方案3：自定义禁用逻辑避开原生默认样式 #

如果以上方案都不生效，可以放弃原生disabled属性，自己实现禁用状态，完全自定义样式和交互：

<template>
  <input
    :class="{ 'custom-disabled': isDisabled }"
    @click="isDisabled ? () => {} : handleClick"
    @keydown="isDisabled ? e => e.preventDefault() : handleKeydown"
  />
</template>

<script setup>
import { ref } from 'vue'
const isDisabled = ref(true) // 你的禁用状态控制变量
const handleClick = () => { /* 正常点击逻辑 */ }
const handleKeydown = () => { /* 正常输入逻辑 */ }
</script>

<style scoped>
.custom-disabled {
  /* 自定义禁用态的外观，和原生禁用保持一致即可 */
  background: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: default; /* 这里不需要加!important，没有默认样式覆盖 */
}
</style>

内容的提问来源于stack exchange，提问作者Julien Berthoud