使用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任何字符。