如何为textarea占位符换行后的各行设置不同样式？

原生 <textarea> 的 ::placeholder 伪元素是单一的样式容器，没法直接给换行后的不同行设置差异化字体粗细。要实现你的需求，最稳妥的方式是用模拟占位符方案——用绝对定位的元素放在textarea下方模拟占位符视觉效果，就能自由控制每一行的样式。

具体实现步骤：

• 用相对定位容器包裹textarea和模拟占位符的div
• 让textarea背景透明（或通过z-index层级让占位符处于下层）
• 监听textarea内容变化，有输入时隐藏模拟占位符
• 给模拟占位符的不同行设置对应字体粗细

以下是React组件实现示例：

import { useState } from 'react';
import './TextareaWithStyledPlaceholder.css';

const TextareaWithStyledPlaceholder = () => {
  const [value, setValue] = useState('');

  return (
    <div className="textarea-container">
      <textarea
        id="contents"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="styled-textarea"
      />
      {/* 仅当textarea为空时显示模拟占位符 */}
      {!value && (
        <div className="placeholder">
          <span className="placeholder-title">Title</span>
          <span className="placeholder-example"> ex)Date,Content...</span>
        </div>
      )}
    </div>
  );
};

export default TextareaWithStyledPlaceholder;

对应的CSS文件（TextareaWithStyledPlaceholder.css）：

.textarea-container {
  position: relative;
  width: 300px; /* 按需调整宽度 */
}

.styled-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  background-color: transparent; /* 透明背景让下层占位符可见 */
  resize: vertical;
}

.placeholder {
  position: absolute;
  top: 8px;
  left: 8px;
  pointer-events: none; /* 不干扰textarea输入事件 */
  color: #999; /* 模拟原生占位符颜色 */
  white-space: pre-line; /* 保留换行格式 */
}

.placeholder-title {
  font-weight: 700;
  display: block; /* 单独占一行 */
}

.placeholder-example {
  font-weight: 400;
  display: block;
}

这个方案的优势：

• 完全自定义每一行样式，除了字体粗细，颜色、字号等都能调整
• 不依赖浏览器对::placeholder的兼容性，跨端表现更一致
• 交互逻辑和原生textarea完全对齐，用户输入后占位符自动隐藏

内容的提问来源于stack exchange，提问作者김정수