如何为textarea的每一行设置不同的样式？

原生CSS并不支持类似::first-line的::nth-line伪元素，所以没办法仅靠CSS为textarea的第N行单独设置背景色——因为textarea是表单控件，内部内容属于纯文本流，CSS无法精准选中除首行外的任意行。

想要实现每行不同背景色的效果，最可行的方式是用可编辑div（contenteditable）模拟textarea，配合JavaScript动态拆分每行并设置样式，同时保留输入编辑的功能。以下是具体实现：

代码示例 #

HTML #

<div id="editable-area" contenteditable="true" role="textbox" aria-multiline="true">
I want this to be red.
This to be green.
This to be blue and keep the same if there is not enough space.
And this another color.
</div>

CSS #

#editable-area {
  height: 100px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 4px;
  overflow-y: auto;
  font-family: monospace; /* 统一字体避免换行计算偏差 */
}

/* 定义每行的背景色 */
.line-1 { background-color: #f33; }
.line-2 { background-color: #3f3; }
.line-3 { background-color: #33f; }
.line-4 { background-color: #fa3; }

JavaScript #

const editableArea = document.getElementById('editable-area');

// 处理内容渲染，拆分每行并添加样式类
function renderColoredLines() {
  // 获取所有文本行（按换行符分割）
  const lines = editableArea.textContent.split('\n').filter(line => line.trim() !== '');
  // 清空原有内容
  editableArea.innerHTML = '';
  
  lines.forEach((line, index) => {
    const span = document.createElement('span');
    span.className = `line-${index + 1}`;
    span.textContent = line + '\n'; // 保留换行
    editableArea.appendChild(span);
  });
}

// 初始化渲染
renderColoredLines();

// 监听内容变化，重新渲染
editableArea.addEventListener('input', renderColoredLines);

注意事项 #

• 使用contenteditable时，需要添加role="textbox"和aria-multiline="true"来保证可访问性。
• 若需要提交表单数据，可以在提交时获取editableArea.textContent的值，像处理普通textarea一样使用。
• 字体尽量选择等宽字体（如monospace），避免因字符宽度不一致导致换行计算偏差。

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