如何在 CSS 中禁用文本框？ 目前，我们的视图中有一个文本框，可以根据模型中的属性启用/禁用它。 我们有 asp.net MVC 视图；根据 Model 属性的值，我们需要渲染文本框或只读文本框。 我们正在考虑通过将 CSS 应用于视图控件来做到这一点。 以前有人做过吗？
【问题讨论】：
readonly 和disabled 之间存在细微差别。在这两种情况下，该值都是不可编辑的，但前者无论如何都会将值发送到服务器端，而后者则不会。此外，后者在大多数网络浏览器中具有不同的（较暗/灰色）默认样式。
&tl;dr：不，您不能使用 CSS 禁用文本框。
pointer-events: none 有效，但在 IE 上，CSS 属性仅适用于 IE 11 或更高版本，因此它不适用于每个浏览器的任何地方。除此之外，您不能使用 CSS 禁用文本框。
但是，您可以像这样禁用 HTML 中的文本框：
<input value="...." readonly />
但是，如果文本框在表单中，并且您希望文本框的值不提交，请改为这样做：
<input value="...." disabled />
所以这两个禁用文本框的选项之间的区别在于disabled 不允许您提交input 文本框的值，但readonly 允许。
有关这两者之间区别的更多信息，请参阅"What is the difference between disabled="disabled" and readonly="readonly"。
【讨论】：
另一种方法是使其只读：
<input type="text" id="txtDis" readonly />
【讨论】：
进一步了解 Pekka 的回答，我在一些文本框中有一个样式“style1”。您可以创建一个“style1[disabled]”，这样您就可以使用“style1”样式设置禁用的文本框：
.style1[disabled] { ... }
在 IE8 上运行良好。
【讨论】：
style1 是一个糟糕的类名。它是由工具生成的吗？
您可以通过 css 禁用：
pointer-events: none;
但并非在任何地方都有效。
【讨论】：
pointer-events: none 不受 IE 8、9 支持，仅在 10 中用于 SVG 元素，最终在 11 中受支持，根据 stackoverflow.com/questions/5855135/… 中的帖子
试试这个。
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
这将不允许在文本框中输入任何字符。
【讨论】：
你不能用 CSS 禁用任何东西，这是一个功能问题。 CSS 适用于设计问题。通过在文本框上设置褪色的颜色，您可以给人一种文本框被禁用的印象。
要实际上禁用元素，你应该使用 disabled 布尔属性：
<input type="text" name="lname" disabled />
或者，如果您愿意，也可以通过 JavaScript 进行设置：
document.forms['formName']['inputName'].disabled = true;
请记住，当您将数据发回服务器时，禁用的输入不会传递它们的值。如果您想保留数据，但不允许直接编辑它，您可能有兴趣将其设置为 readonly。
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
演示：http://jsfiddle.net/655Su/1/
这不会改变元素的 UI，所以你需要自己做：
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
您还可以定位任何禁用的元素：
input[disabled] { /* styles */ }
【讨论】：
**只需复制粘贴此代码并运行即可看到文本框已禁用**
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>.container{float:left;width:200px;height:25px;position:relative;}
.container input{float:left;width:200px;height:25px;}
.overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;}
</style>
</head>
<body>
<div class="container">
<input type="text" value="rvi.tom@gmail.com" />
<div class="overlay">
</div>
</div>
</body>
</html>
【讨论】：
input.disabled 并根据需要通过 javascript 添加类。您还可以在focus 到blur 上使用事件处理程序。轻松适应多个元素的解决方案。
CSS 不能禁用文本框，但是您可以关闭显示或可见性。
display: none;
visibility: hidden;
或者你也可以设置HTML属性：
disabled="disabled"
【讨论】：
您不能在 CSS 中禁用文本框。禁用它不是一个演示任务，您必须在 HTML 标记中使用 disabled 属性执行此操作。
您可以通过将文本框放在具有 z-index 的绝对定位的透明元素下方来组合一些东西...但这很愚蠢，而且您还需要第二个 HTML 元素。
但是，您可以在 CSS 中使用 style 禁用文本框（如果这就是您的意思）
input[disabled] { ... }
从 IE7 开始以及在所有其他主要浏览器中。
【讨论】：