是否有可能禁用表单字段使用CSS?我当然知道禁用属性，但是否有可能在CSS规则中指定这一点?比如——
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
disabled: true; /* Does not work */
}
</style>
我问的原因是，我有一个应用程序，其中表单字段是自动生成的，字段隐藏/显示基于一些规则(在Javascript中运行)。现在我想扩展它以支持禁用/启用字段，但规则的编写方式是直接操作表单字段的样式属性。因此，现在我必须扩展规则引擎来更改属性以及表单字段的样式，但不知何故，这似乎不太理想。
奇怪的是，CSS中有可见和显示属性，但没有启用/禁用。在尚未开发的HTML5标准或非标准(特定于浏览器)中是否存在类似内容?
当前回答
第一次回答问题，而且似乎有点晚……
我同意通过javascript来实现，如果你已经在使用它。
对于一个复合结构，就像我通常使用的那样，我已经在element后面创建了一个css伪元素，以阻止用户交互元素，并允许在不操作整个结构的情况下进行样式化。
例如:
<div id=test class=stdInput>
<label class=stdInputLabel for=selecterthingy>A label for this input</label>
<label class=selectWrapper>
<select id=selecterthingy>
<option selected disabled>Placeholder</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
</label>
</div>
我可以在包装div上放置一个禁用类
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
这将使div中的文本变成灰色，用户无法使用它。
我的例子JSFiddle
其他回答
既然规则是在JavaScript中运行的，为什么不使用JavaScript(或者在我的例子中使用jQuery)禁用它们呢?
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
更新
attr函数不再是主要的方法，正如在下面的评论中指出的那样。这是用prop函数完成的。
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
这很有帮助:
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
更新:
如果你想禁用TAB索引，你可以这样使用:
<input type="text" name="username" value="admin" tabindex="-1" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
输入(name =用户名){ 禁用:真实;/*不起作用*/}
我知道这个问题很老了，但对于遇到这个问题的其他用户来说，我认为禁用输入的最简单的方法就是通过':disabled'
<input type="text" name="username" value="admin" disabled />
<style type="text/css">
input[name=username]:disabled {
opacity: 0.5 !important; /* Fade effect */
cursor: not-allowed; /* Cursor change to disabled state*/
}
</style>
在现实中，如果你有一些脚本来禁用输入动态/自动与javascript或jquery，将自动禁用基于你添加的条件。
以jQuery为例:
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
希望CSS中的答案能有所帮助。
奇怪的是，CSS中有可见和显示属性，但没有启用/禁用。
你误解了CSS的目的。CSS并不意味着要改变表单元素的行为。这只是为了改变他们的风格。隐藏文本字段并不意味着文本字段不再存在，或者当您提交表单时浏览器不会发送它的数据。它所做的只是把它从用户的眼睛中隐藏起来。
要真正禁用字段，必须在HTML中使用disabled属性或在JavaScript中使用disabled DOM属性。
你不能使用CSS禁用文本框。 解决方案将是HTML属性。
disabled="disabled"
