从 CSS 禁用文本区域

Question

为了禁用文本区域（或任何其他输入元素），您可以：

• 在 HTML 中，您可以编写： <textarea id='mytextarea' disabled></textarea>

• 从 jQuery，你可以： $("#mytextarea").attr("disabled","disabled");

• CSS？是否可以使用 CSS 禁用文本区域？

原文由 bArmageddon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使文本区域显示为已禁用，但实际上无法禁用它。

使用 JavaScript，您实际上所做的只是修改由 HTML disabled 属性设置的相同 DOM 属性，因此使用 HTML 和 JavaScript 本质上是 在做同样的事情。然而，CSS 完全不在这幅图中，因为它不进行任何类型的 DOM 操作——它控制的只是元素的外观（视觉或其他），而不是它的行为。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在一个项目中，我有一个容器，里面有一个文本区域和一些按钮。要禁用整个功能，我使用以下代码向其附加一个类：

 .disabled {
  opacity: 0.3;
}
.disabled:after {
    width: 100%;
    height: 100%;
    position: absolute;
}

<div class="disabled">
    <textarea></textarea>
    <!-- textarea, buttons and other input elements -->
</div>

虽然不透明度仅用于显示，但 :after 元素正在做这项工作。容器中的所有元素不再对单击和鼠标悬停做出反应（尽管使用制表符到达它们仍然有效）。对于我的需要和我的情况，这工作正常并且是一个简单的 css hack。

原文由 Fabian 发布，翻译遵循 CC BY-SA 3.0 许可协议