JavaScript/HTML为输入类型textarea替换行颜色？

有没有一种简单的方法让HTML

交替其行颜色 改进编辑

---

我不介意解决方案是纯CSS还是需要JavaScript

如果我理解正确，您希望文本区域内的颜色交替（如每行）

我建议最简单的方法是在文本区域中使用背景图像，使交替颜色的行的高度与字体大小/行高相同，以创建交替行的错觉，然后重复背景图像

附加解决方案

然而，似乎使用这种方法，背景不会随着每一行滚动

我能想到的最好的技术是使用James Padolsey开发的名为“autoResize”的jQuery插件。这样做的目的是删除滚动条，当文本接近

textarea

底部时，

textarea

高度相应增加

现在，这可能会导致问题，因为根据用户写多少文本，您可能会有很长的文本区域，但我已经为此创建了一个修复程序

我们可以做的是将

文本区域

包装在

div

中，并将

溢出-y

（垂直）设置为

滚动

，将

溢出-x

（水平）设置为

隐藏

。这样做的目的是在

文本区域

上给我们一个“假”滚动条，产生一种可以滚动的错觉，因此我们的背景现在看起来好像也随着文本上下滚动

您必须相应地调整宽度/高度/边距/边框/填充物等，并可能检查跨浏览器兼容性，但这应该有助于将您设置在正确的轨道上，让您继续前进

下面是我使用上述方法创建的示例的链接：

---

在代码笔上找到这个。为我工作。

谢谢你，真是个好办法。除非有人在不使用图像的情况下提出建议，否则我会选择它为最佳。只要您的行高/字体变化与背景图像颜色“行”的高度匹配，这听起来是个好主意。。我不认为有其他简单的方法来做这件事textarea@HelloJoe那不行。我试过了。想象你的身高是14像素。图像为28px（红色顶部橙色底部）。问题在于，您假设文本始终位于文本区域的顶部，而该区域可能不在顶部。由于滚动，文本可能会被部分删除。我明白你的意思，除非你自己已经找到了解决方案，否则我可以帮助你尝试并找到一个替代解决方案？不是文本区域，但可以查看HTML5的ContentEditable属性：

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}