如何通过CSS设置textarea为只读？无需修改HTML代码

嘿，我完全懂你不想挨个修改所有textarea标签的痛点！虽然CSS没法直接给元素设置readonly属性，但我们可以通过样式模拟只读的效果，甚至搭配少量JS来实现真正的只读（避免键盘输入的漏洞）。下面给你两种可行的方案：

方案1：纯CSS模拟只读效果 #

这种方法能让textarea看起来和原生readonly状态一致，同时阻止鼠标交互，但要注意键盘仍可能聚焦并输入，适合对交互限制要求不高的场景：

/* 给所有textarea设置只读样式，也可以用类选择器精准控制特定元素 */
textarea {
  /* 阻止鼠标点击、hover等交互行为 */
  pointer-events: none;
  /* 模拟原生readonly的灰色背景 */
  background-color: #f5f5f5;
  /* 弱化文字颜色，增强只读视觉提示 */
  color: #666;
  /* 保持边框样式和普通textarea一致 */
  border: 1px solid #ddd;
  /* 禁止用户选中文本 */
  user-select: none;
}

如果只想给特定textarea设置，把选择器改成.your-custom-class，再给目标textarea加上这个类即可（不用修改readonly属性）。

方案2：JS批量设置readonly属性（更可靠） #

如果要完全禁止所有输入（包括键盘Tab聚焦后输入），纯CSS就不够了，这时用几行JS就能批量给所有textarea加上readonly属性，完全不用手动修改HTML：

// 选中所有textarea，批量添加readonly属性
document.querySelectorAll('textarea').forEach(el => {
  el.setAttribute('readonly', true);
});

你可以把这段代码放在页面的<script>标签里，或者外部JS文件中，页面加载后就会自动生效。如果只想针对部分textarea，把querySelectorAll('textarea')改成更精准的选择器，比如querySelectorAll('.need-readonly')。

注意事项 #

• 纯CSS方案的局限性：无法阻止键盘输入，比如用户通过Tab键聚焦到textarea后，还是能输入内容，所以只适合视觉展示或鼠标交互为主的场景。
• JS方案是真正的只读，和HTML原生readonly属性效果完全一致，推荐在需要严格限制输入的场景使用。

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