嘿，这个问题得先掰扯清楚你说的是哪类提示文本——毕竟和拖拽相关的提示分两种情况，我给你逐一说明：

1. 浏览器原生的拖拽状态提示（鼠标旁的"Move"） #

这种是浏览器自带的系统级提示，完全没法用CSS改，因为它属于浏览器的原生UI组件，根本不受网页样式的控制。要自定义这种提示，必须靠JavaScript：

• 你需要在dragstart事件里创建一个自定义的拖拽反馈元素（比如一个小div），然后用setDragImage()方法替换掉浏览器默认的拖拽图像/文本。
• 给你个简单示例：

const dropZone = document.getElementById('your-drop-zone');

// 先阻止默认行为，不然浏览器会直接打开文件
dropZone.addEventListener('dragenter', (e) => {
  e.preventDefault();
});

dropZone.addEventListener('dragstart', (e) => {
  // 创建自定义提示元素
  const dragHint = document.createElement('div');
  dragHint.textContent = '松开即可上传';
  dragHint.style.padding = '8px 12px';
  dragHint.style.background = '#2c3e50';
  dragHint.style.color = '#fff';
  dragHint.style.borderRadius = '4px';
  // 临时添加到页面（不然setDragImage找不到元素）
  document.body.appendChild(dragHint);
  // 设置为拖拽时显示的图像
  e.dataTransfer.setDragImage(dragHint, 0, 0);
  // 拖拽开始后立刻移除，避免留在页面上
  setTimeout(() => document.body.removeChild(dragHint), 0);
});

2. 自定义拖放区的占位提示文本 #

如果是你自己在页面上做的拖放区里的提示文案（比如默认显示"Move"，想改成更友好的内容），那两种方式都能搞定：

• 用CSS+JS配合（更优雅，样式和逻辑分离）：
  先通过CSS伪元素设置默认和拖拽中的提示文本，再用JS监听事件切换类：

  .drop-zone {
    width: 300px;
    height: 200px;
    border: 2px dashed #bdc3c7;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drop-zone::before {
    content: '拖放文件到此处';
    color: #95a5a6;
    font-size: 16px;
  }
  .drop-zone.dragover::before {
    content: '松开就上传啦';
    color: #27ae60;
    font-weight: 500;
  }
  

  然后JS部分处理事件：

  const dropZone = document.getElementById('your-drop-zone');
  
  dropZone.addEventListener('dragenter', (e) => {
    e.preventDefault();
    dropZone.classList.add('dragover');
  });
  
  dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('dragover');
  });
  
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    // 这里写处理上传文件的逻辑
    const files = e.dataTransfer.files;
    console.log('收到文件:', files);
  });
  

• 纯JS也行：直接修改拖放区的文本内容或者innerHTML，不过样式和逻辑混在一起，不如上面的方式干净。

总结一下 #

• 如果是鼠标旁边的原生"Move"提示：只能用JS自定义拖拽图像来替换，CSS管不着。
• 如果是页面拖放区里的提示：CSS+JS配合是最优解，纯JS也能实现。

内容的提问来源于stack exchange，提问作者GTS Joe