如何自定义React/Next.js输入框placeholder 实现同个占位符多样式效果

原生<input>的placeholder属于纯文本属性，浏览器提供的::placeholder伪元素仅支持给整个占位符内容设置统一样式，无法对部分文本单独应用样式，因此要实现分段不同样式的效果，需采用模拟占位符的方案实现。

具体实现步骤（适配你现有React + Tailwind代码） #

import { useState, useRef } from 'react';

function CustomInput() {
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef(null);

  return (
    <form>
      {/* 相对定位容器包裹输入框和模拟占位符 */}
      <div className="relative w-full">
        <input
          ref={inputRef}
          className="bg-gray-100 w-full h-16 pl-5 relative z-10"
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        {/* 模拟占位符，输入框为空时显示 */}
        {!inputValue && (
          <div 
            className="absolute left-5 top-1/2 -translate-y-1/2 z-0"
            onClick={() => inputRef.current?.focus()}
          >
            <span className="text-gray-400">Placeholder</span>
            <span className="text-red-500 font-bold ml-1">test</span>
            {/* 可根据需求拆分更多文本片段，分别设置独立样式 */}
          </div>
        )}
      </div>
    </form>
  );
}

实现要点 #

• 外层容器设置relative定位，模拟占位符用absolute定位对齐到输入框内部对应位置
• 输入框设置更高的z-index，确保输入内容不会被模拟占位符遮挡
• 模拟占位符添加点击事件，实现点击占位符也能聚焦输入框的原生交互效果

备选方案 #

如果需要更复杂的富文本输入效果，也可以用带contenteditable属性的div代替原生input，直接在div内插入带样式的占位符内容，但需要额外处理输入值同步、表单提交适配等逻辑，开发成本更高。

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