Question

我的页面上有几个div容器，其中包含内的表单字段。它们都具有相同的class值，并且我希望使用此类/ CSS将表单字段 all设置为非活动状态（disabled）。

这可能吗？

Answer 1

有很多方法可以用CSS来实现，但是它们都没有实际有效，用户可以通过简单的方法绕过CSS。但是这里有一个例子，无论如何使用css：

您的HTML：

<div id="con">
    <input name="name" type="text" value="Text input" />
    <span id="overlay"></span>
</div>

你的CSS：

#con {
    width: 300px;
    height: 50px;
    position: relative;
}
#con input[type="text"] {
    position: relative;
    top: 15px;
    z-index: 1;
    width: 200px;
    display: block;
    margin: 0 auto;
}
#con #overlay {
    width: 300px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: rgba(155,0,0, .5);
}

Example fiddle

如前所述，jQuery对于这个特定问题来说是一个更可靠的解决方案。

Answer 2

只有CSS才能实现这一点。

信息：Disable html input element by applying custom css class

使用CSS类禁用DIV中的所有表单域

2 个答案: