如何禁用使用CSS的表单域？
是否有可能使用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中运行，为什么不使用JavaScript（或在我的例子，jQuery）禁用它们？
$('#fieldId').attr('disabled', 'disabled'); //Disable $('#fieldId').removeAttr('disabled'); //Enable
UPDATE
attr函数不再是这方面的主要方法，正如下面的评论中指出的那样。 这现在用prop函数完成了。
$( "input" ).prop( "disabled", true ); //Disable $( "input" ).prop( "disabled", false ); //Enable
您可以使用CSS来伪造禁用的效果。
pointer-events:none;
你可能也想改变颜色等
非常好奇你在CSS中可见和显示属性，但不启用/禁用。
非常好奇，你觉得这很好奇。 你误解了CSS的目的。 CSS并不意味着改变表单元素的行为 。 这只是为了改变他们的风格 。 隐藏文本字段并不意味着文本字段不再存在，或者在您提交表单时浏览器不会发送其数据。 它所做的就是将其从用户的眼睛中隐藏起来。
要实际禁用您的字段，您必须在HTML中使用disabled属性或在JavaScript中disabled DOM属性。
这可能会有所帮助：
<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>
您不能使用CSS来禁用文本框。 解决scheme将是HTML属性。
disabled="disabled"
实际的解决scheme是使用CSS来实际隐藏input。
为了得出这个结论，你可以为每个实际input（一个启用，一个禁用）编写两个htmlinput，然后使用javascript控制CSS来显示和隐藏它们。
第一次接电话，看起来有点晚了…
我同意这样做，如果你已经使用它。
对于一个复合结构，就像我经常使用的那样，我在元素之后做了一个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类
.disabled { position : relative; color : grey; } .disabled:after { position :absolute; left : 0; top : 0; width : 100%; height : 100%; content :' '; }
这会使div内的文字变灰，并使用户无法使用。
我的例子JSFiddle
我总是使用：
input.disabled { pointer-events:none; color:#AAA; background:#F5F5F5; }
然后将css类应用于input字段：
<input class="disabled" type="text" value="90" name="myinput" id="myinput" />
你不能这样做，我怕，但你可以在jQuery中做以下事情，如果你不想添加属性的字段。 只要把它放在你的<head></head>标签里面
$(document).ready(function(){ $(".inputClass").focus(function(){ $(this).blur(); }); });
如果你在DOM中生成字段（用JS），你应该这样做：
$(document).ready(function(){ $(document).on("focus", ".inputClass", function(){ $(this).blur(); }); });
这可以通过在您的input元素顶部放置一个覆盖层来达到非关键的目的。 这是我在纯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来达到这个目的。 我的build议是包括一个JavaScript代码，您分配或更改应用于input的CSS类。 类似的东西：
function change_input() { $('#id_input1') .toggleClass('class_disabled') .toggleClass('class_enabled'); $('.class_disabled').attr('disabled', ''); $('.class_enabled').removeAttr('disabled', ''); }
.class_disabled { background-color : #FF0000; } .class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form> Input: <input id="id_input1" class="class_enabled" /> <input type="button" value="Toggle" onclick="change_input()";/> </form>
