CSS输入框占位符过渡：如何解决有内容时占位符回退、点击占位符无法聚焦问题

问题本质 #

当前两个问题的核心成因：

• 占位符回退重叠：CSS上浮规则仅绑定textarea:focus状态，失焦后规则立即失效，无论是否有输入内容，占位符都会弹回初始位置和输入内容重叠
• 点击占位符无法聚焦：绝对定位的span浮在文本域上层，默认会拦截鼠标点击事件，点击动作无法传递到下层的textarea

修复步骤 #

1. 实现“有输入内容时占位符保持上浮” #

无需引入JS监听输入状态，借助CSS伪类即可完成状态判断：

• 给textarea设置空的原生占位属性placeholder=" "，仅用于状态判定：文本域为空时，原生占位符处于显示状态；一旦有输入内容，原生占位符自动隐藏，这个状态可以通过*:not(:placeholder-shown)*伪类精准捕捉
• 调整上浮触发规则，将单一的聚焦触发改为双条件触发：只要满足「文本域处于聚焦状态」或「文本域存在输入内容」，就保持占位符的上浮位置
  对应选择器：textarea:focus ~ span, textarea:not(:placeholder-shown) ~ span
• 将原生占位符的文字设为透明，避免其与自定义span占位符重叠显示

2. 实现“点击占位符区域可聚焦文本域” #

• 给span添加pointer-events: none属性，让span完全不响应鼠标事件，点击动作直接穿透到下层的textarea，自动触发聚焦。该属性完全适配占位符不需要独立交互的定位，无额外副作用
• 优化动画逻辑：将原本写在聚焦规则里的transition属性移到span的基础样式中，保证上浮、回退两个方向都有平滑过渡效果

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Input</title>
  <style>
    body {
      margin: 0;
    }
    #top-heading {
      padding: 1rem;
      text-align: center;
      margin: 0 auto 1rem;
    }
    /* 包裹输入区的容器加相对定位，作为绝对定位占位符的参照基准 */
    .input-wrap {
      position: relative;
    }
    textarea {
      width: 85%;
      display: block;
      height: 10vh;
      margin: 1.5rem;
      margin-top: 0;
      padding: 0.5rem;
      font-size: large;
      /* 隐藏原生占位符，仅保留状态判断能力 */
      &::placeholder {
        color: transparent;
      }
    }
    span {
      position: absolute;
      top: 6rem;
      padding-left: 2.7rem;
      color: rgb(121, 120, 120);
      font-size: larger;
      /* 禁止span响应鼠标事件，实现点击穿透 */
      pointer-events: none;
      /* 将过渡效果放在基础样式，保证双向动画流畅 */
      transition: 0.6s ease;
    }
    /* 双条件触发占位符上浮 */
    textarea:focus ~ span,
    textarea:not(:placeholder-shown) ~ span {
      color: black;
      font-size: 1.091rem;
      transform: translate3d(-1.15rem, -1.9rem, 2rem);
    }
  </style>
</head>
<body>
  <h1 id="top-heading">Input</h1>
  <div class="input-wrap">
    <!-- 空的placeholder仅用于状态判断 -->
    <textarea id="txt-input" placeholder=" "></textarea>
    <span>Enter the input</span>
  </div>
</body>
</html>

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