使用CSS禁用文本框

Question

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

Answer 1

你可以通过CSS禁用:

pointer-events: none; 

但是到处都不起作用.

Answer 2

你不能用CSS禁用任何东西,这是一个功能问题.CSS适用于设计问题.您可以通过在其上设置褪色的颜色来给出禁用文本框的印象.

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

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

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

或者,如果您愿意,可以通过JavaScript设置:

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

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

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

Answer 3

CSS无法禁用文本框,但您可以关闭显示或可见性.

display: none;
visibility: hidden;

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

disabled="disabled"

Answer 4

您无法在CSS中禁用文本框.禁用它不是表示任务,您必须使用该disabled属性在HTML标记中执行此操作.

您可以通过将文本框放在带有z-index的绝对定位的透明元素下面来放置一些东西......但这只是愚蠢的,而且无论如何你还需要第二个HTML元素.

你可以,但是,风格禁用文本框使用(如果这是你的意思)的CSS

input[disabled] { ... }

从IE7以上和所有其他主流浏览器.