简短回答

Question

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

Answer 1

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

display: none;
visibility: hidden;

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

disabled="disabled"

Answer 2

你可以通过css禁用：

pointer-events: none;

虽然无处不在。

Answer 3

你不能用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 4

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

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

然而，您可以使用

在CSS中禁用样式文本框（如果这就是您的意思）

input[disabled] { ... }

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

Answer 5

**只需复制粘贴此代码即可运行，您可以看到文本框已禁用**

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

Answer 6

进一步了解Pekka的回答，我的一些文本框上有一个样式“style1”。您可以创建“style1 [disabled]”，因此您只使用“style1”样式设置已禁用的文本框的样式：

.style1[disabled] { ... }

在IE8上工作正常。

Answer 7

试试吧。

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

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

Answer 8

另一种方法是将其设为只读

Answer 9

简短回答

不，您不能使用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"。

使用CSS禁用文本框

9 个答案:

简短回答

长答案