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

小编典典

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

all

是否可以使用 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 标准中是否有类似的东西，甚至是非标准的东西（特定于浏览器）？

阅读 64

2022-06-10

共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>

2022-06-10