使用CSS禁用文本框

如何禁用CSS中的文本框? 目前我们在视图中有一个文本框,可以根据模型中的属性启用/禁用。 我们有asp.net MVC视图; 取决于Model属性的值,我们需要呈现文本框或只读文本框。 我们正在考虑将CSS应用到视图控件。 有人做过这个吗?

CSS不能禁用文本框,但可以closures显示或可见性。

 display: none; visibility: hidden; 

或者你也可以设置HTML属性:

 disabled="disabled" 

你不能禁用任何CSS,这是一个function问题。 CSS意味着devise问题。 你可以给一个文本框被禁用的印象,通过设置在其上的颜色。

实际禁用该元素,您应该使用禁用的布尔属性:

 <input type="text" name="lname" disabled /> 

演示: http : //jsfiddle.net/p6rja/

或者,如果你喜欢,你可以通过JavaScript设置:

 document.forms['formName']['inputName'].disabled = true;​​​​ 

演示: http : //jsfiddle.net/655Su/

请记住,当您将数据发回服务器时,被禁用的input不会传递其值。 如果要保存数据,但不允许直接编辑它,则可能有兴趣将其设置为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 */ } 

你可以通过CSS禁用:

 pointer-events: none; 

虽然无处不在。

你不能禁用CSS中的文本框。 禁用它不是一个表象性的任务,你必须在HTML标记中使用disabled属性来做到这一点。

你可以把文本框放在一个绝对定位的透明元素下面,用z-index来放置东西……但是这只是愚蠢的,再加上你需要第二个HTML元素。

但是,您可以在CSS中使用禁用的文本框(如果这就是您的意思)

 input[disabled] { ... } 

从IE7向上和所有其他主stream浏览器。

**只需复制粘贴此代码并运行即可看到禁用的文本框**

 <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> 

在Pekka的回答中,我进一步了解了一些文本框的style1风格。 您可以创build一个“style1 [禁用]”,因此您只使用“style1”样式设置禁用的文本框的样式:

 .style1[disabled] { ... } 

在IE8上工作得很好。

试试这个

 <asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox> 

这将不允许在TextBox中input任何字符。