如何使用CSS禁用表单字段？

小编典典

如何使用CSS禁用表单字段？

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中具有visible和display属性，但没有启用/禁用。仍在开发中的HTML5标准中是否有类似的东西，甚至是非标准的东西（特定于浏览器）？

阅读 371

2020-05-16

共1个答案

小编典典

这可能会有所帮助：

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

更新：

如果要从选项卡索引禁用，则可以通过以下方式使用它：

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

2020-05-16