是否有可能禁用表单字段使用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标准或非标准(特定于浏览器)中是否存在类似内容?
当前回答
你不能使用CSS禁用文本框。 解决方案将是HTML属性。
disabled="disabled"
其他回答
实际的解决方案是使用CSS来隐藏输入。
为了得出自然的结论，您可以为每个实际输入编写两个html输入(一个启用，一个禁用)，然后使用javascript控制CSS来显示和隐藏它们。
恐怕你不能这样做，但如果你不想在字段中添加属性，你可以在jQuery中执行以下操作。只要把它放在<head></head>标签内
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
如果你在DOM中生成字段(用JS)，你应该这样做:
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
这可以通过在输入元素上叠加来实现非关键目的。下面是纯HTML和CSS的例子。
https://jsfiddle.net/1tL40L99/
<div id="container">
<input name="name" type="text" value="Text input here" />
<span id="overlay"></span>
</div>
<style>
#container {
width: 300px;
height: 50px;
position: relative;
}
#container input[type="text"] {
position: relative;
top: 15px;
z-index: 1;
width: 200px;
display: block;
margin: 0 auto;
}
#container #overlay {
width: 300px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: rgba(255,0,0, .5);
}
</style>
你不能使用CSS禁用文本框。 解决方案将是HTML属性。
disabled="disabled"
第一次回答问题，而且似乎有点晚……
我同意通过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
