如何通过HTML/CSS让输入框placeholder文本可鼠标选中高亮？

嘿，这个问题我之前也帮人捋过——原生的<input> placeholder确实没办法直接让用户选中复制，这是浏览器遵循HTML规范的默认限制哦。下面给你详细拆解：

首先得明确：HTML标准里的placeholder属性，本质是浏览器渲染的临时提示文本，它不属于输入框的“可交互内容”，也没有对应的可选中DOM节点。浏览器只会把它绘制在输入框内部用来提示用户，但不会开放选中、复制的交互权限，所有主流浏览器（Chrome、Firefox、Safari、Edge）都遵循这个规则。

既然客户有明确要求，我们可以用「模拟placeholder」的方式实现，核心思路是用一个可选中的文本元素替代原生placeholder，具体步骤如下：

1. 隐藏原生placeholder（设为空值）
2. 在输入框上方叠加一个<span>元素，样式模仿原生placeholder
3. 通过CSS/JS控制：输入框为空时显示这个模拟文本，有内容时隐藏它

这里是完整的可运行代码示例：

<div class="input-wrapper">
  <input 
    locale="en" 
    maxlength="255" 
    placeholder="" 
    size="255" 
    type="text" 
    name="user[first_name]" 
    id="user_first_name"
    class="custom-input"
  >
  <span class="placeholder-text">I want to select, highlight and copy this text</span>
</div>

.input-wrapper {
  position: relative;
  display: inline-block;
}

.custom-input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 确保输入框和模拟placeholder的样式对齐 */
}

.placeholder-text {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  color: #999; /* 模仿原生placeholder的灰色调 */
  pointer-events: none; /* 让点击穿透到下方的输入框 */
  user-select: text; /* 明确允许文本被选中 */
  font-size: 14px;
}

/* 输入框有内容时自动隐藏模拟placeholder */
.custom-input:not(:placeholder-shown) + .placeholder-text {
  display: none;
}

// 可选：如果需要做焦点时的样式动画（比如像Material Design那样上移提示文本），可以加这段JS
const input = document.getElementById('user_first_name');
const placeholder = document.querySelector('.placeholder-text');

input.addEventListener('focus', () => {
  if (!input.value) {
    placeholder.style.transform = 'translateY(-120%) scale(0.8)';
    placeholder.style.transition = 'all 0.2s ease';
  }
});

input.addEventListener('blur', () => {
  if (!input.value) {
    placeholder.style.transform = 'translateY(-50%) scale(1)';
  }
});

这个方案的优势：

• 模拟的提示文本可以被正常选中、复制
• 样式可以完全匹配原生placeholder，甚至支持定制化动画
• 完全不影响输入框的正常输入、表单提交等功能

在HTML官方标准中，placeholder属性的定义是：用于提示用户输入框预期值的简短提示，它的核心作用是辅助用户理解输入要求，而非作为可交互的内容提供。因此，浏览器不会为placeholder开放选中、复制的交互能力，这是标准明确的行为限制，无法通过纯HTML/CSS突破。

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