使用 CSS 禁用文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2458595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable a textbox using CSS
提问by Balaji
How to disable a textbox in CSS? Currently we are having a textbox in our view which can be enabled/disabled depending on a property in the model. We are having asp.net MVC view; depending on the value of the Model property we need to either render a textbox or readonly textbox. we were thinking of doing this by applying CSS to the view control. Has someone done this earlier?
如何在 CSS 中禁用文本框？目前，我们的视图中有一个文本框，可以根据模型中的属性启用/禁用该文本框。我们有 asp.net MVC 视图；根据 Model 属性的值，我们需要呈现文本框或只读文本框。我们正在考虑通过将 CSS 应用于视图控件来做到这一点。之前有人做过这个吗？
采纳答案by Dustin Laine
CSS cannot disable the textbox, you can however turn off display or visibility.
CSS 无法禁用文本框，但是您可以关闭显示或可见性。
display: none;
visibility: hidden;
Or you can also set the HTMLattribute:
或者你也可以设置 HTML 属性：
disabled="disabled"
回答by abbie
you can disable via css:
您可以通过 css 禁用：
pointer-events: none;
Doesn't work everywhere though.
虽然不是到处都有效。
回答by Sampson
You can't disable anything with CSS, that's a functional-issue. CSS is meant for design-issues. You could give the impression of a textbox being disabled, by setting washed-out colors on it.
你不能用 CSS 禁用任何东西，这是一个功能问题。CSS 用于设计问题。通过在文本框上设置褪色颜色，您可以给人一种文本框被禁用的印象。
To actuallydisable the element, you should use the disabled boolean attribute:
要实际禁用该元素，您应该使用 disabled 布尔属性：
<input type="text" name="lname" disabled />
Demo: http://jsfiddle.net/p6rja/
演示：http: //jsfiddle.net/p6rja/
Or, if you like, you can set this via JavaScript:
或者，如果您愿意，您可以通过 JavaScript 进行设置：
document.forms['formName']['inputName'].disabled = true;????
Demo: http://jsfiddle.net/655Su/
演示：http: //jsfiddle.net/655Su/
Keep in mind that disabled inputs won't pass their values through when you post data back to the server. If you want to hold the data, but disallow to directly edit it, you may be interested in setting it to readonlyinstead.
请记住，当您将数据发回服务器时，禁用的输入不会传递它们的值。如果您想保留数据，但不允许直接编辑它，您可能有兴趣将其设置为readonly。
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
Demo: http://jsfiddle.net/655Su/1/
演示：http: //jsfiddle.net/655Su/1/
This doesn't change the UI of the element, so you would need to do that yourself:
这不会更改元素的 UI，因此您需要自己执行此操作：
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
You could also target any disabled element:
您还可以定位任何禁用的元素：
input[disabled] { /* styles */ }
回答by Pekka
You can't disable a textbox in CSS. Disabling it is not a presentational task, you will have to do this in the HTML markup using the disabledattribute.
您不能在 CSS 中禁用文本框。禁用它不是一项展示性任务，您必须使用该disabled属性在 HTML 标记中执行此操作。
You may be able to put something together by putting the textbox underneath an absolutely positioned transparent element with z-index... But that's just silly, plus you would need a second HTML element anyway.
您可以通过将文本框放在具有 z-index 的绝对定位的透明元素下方来将某些东西放在一起……但这很愚蠢，而且无论如何您都需要第二个 HTML 元素。
You can, however, styledisabled text boxes (if that's what you mean) in CSS using
但是，您可以使用 CSS 在 CSS 中设置禁用的文本框的样式（如果这就是您的意思）
input[disabled] { ... }
from IE7 upwards and in all other major browsers.
从 IE7 到所有其他主要浏览器。
回答by GBU
Going further on Pekka's answer, I had a style "style1" on some of my textboxes. You can create a "style1[disabled]" so you style only the disabled textboxes using "style1" style:
继续 Pekka 的回答，我的一些文本框上有一个样式“style1”。您可以创建一个“style1[disabled]”，以便您使用“style1”样式仅设置禁用的文本框的样式：
.style1[disabled] { ... }
Worked ok on IE8.
在 IE8 上工作正常。
回答by ravi tom
**just copy paste this code and run you can see the textbox disabled **
**只需复制粘贴此代码并运行即可看到禁用的文本框**
<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="[email protected]" />
<div class="overlay">
</div>
</div>
</body>
</html>
回答by zixuan
&tl;dr: No, you can't disable a textbox using CSS.
&tl;dr：不，您不能使用 CSS 禁用文本框。
pointer-events: noneworks but on IE the CSS property only works with IE 11 or higher, so it doesn't work everywhere on every browser. Except for that you cannot disable a textbox using CSS.
pointer-events: none有效，但在 IE 上，CSS 属性仅适用于 IE 11 或更高版本，因此它不适用于所有浏览器。除此之外，您不能使用 CSS 禁用文本框。
However you could disable a textbox in HTML like this:
但是，您可以像这样禁用 HTML 中的文本框：
<input value="...." readonly />
But if the textbox is in a form and you want the value of the textbox to be not submitted, instead do this:
但是如果文本框在表单中并且您希望不提交文本框的值，请执行以下操作：
<input value="...." disabled />
So the difference between these two options for disabling a textbox is that disabledcannot allow you to submit the value of the inputtextbox but readonlydoes allow.
因此，禁用文本框的这两个选项之间的区别在于disabled不能允许您提交input文本框的值但readonly允许。
For more information on the difference between these two, see "What is the difference between disabled="disabled"and readonly="readonly".
有关这两者之间区别的更多信息，请参阅“disabled="disabled"和readonly="readonly".
回答by Arun Banik
Just try this.
试试这个。
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
This won't allow any characters to be entered inside the TextBox.
这将不允许在 TextBox 内输入任何字符。
回答by silentwarrior
Another way is by making it readonly:
另一种方法是将其设为只读：
<input type="text" id="txtDis" readonly />
