是否有可能禁用表单字段使用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标准或非标准(特定于浏览器)中是否存在类似内容?


当前回答

指针事件的变体:none;解决方案,解决输入仍然可以通过它的标签控件或tabindex访问的问题,是将输入包装在div中,这是一个样式为禁用文本输入,并设置输入{可见性:隐藏;}当输入被“禁用”时。 裁判:https://developer.mozilla.org/en-US/docs/Web/CSS/visibility的值

div.dependant { border: 0.1px solid rgb(170, 170, 170); background-color: rgb(235,235,228); box-sizing: border-box; } input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type { display: inline-block; } input[type="checkbox"]:checked ~ div.dependant:first-of-type { display: contents; } input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input { visibility: hidden; } <form> <label for="chk1">Enable textbox?</label> <input id="chk1" type="checkbox" /> <br /> <label for="text1">Input textbox label</label> <div class="dependant"> <input id="text1" type="text" /> </div> </form>

上面片段中应用的禁用样式来自Chrome UI,可能在视觉上与其他浏览器上禁用的输入不相同。可能它可以使用特定于引擎的CSS扩展-prefixes为各个浏览器定制。虽然乍一看,我不认为它可以: 微软CSS扩展,Mozilla CSS扩展,WebKit CSS扩展

引入额外的值visibility: disabled或display: disabled或甚至appearance: disabled似乎更明智,因为visibility: hidden已经影响了可应用元素和相关控制元素的行为。

其他回答

实际的解决方案是使用CSS来隐藏输入。

为了得出自然的结论,您可以为每个实际输入编写两个html输入(一个启用,一个禁用),然后使用javascript控制CSS来显示和隐藏它们。

这很有帮助:

<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禁用文本框。 解决方案将是HTML属性。

disabled="disabled"

指针事件的变体:none;解决方案,解决输入仍然可以通过它的标签控件或tabindex访问的问题,是将输入包装在div中,这是一个样式为禁用文本输入,并设置输入{可见性:隐藏;}当输入被“禁用”时。 裁判:https://developer.mozilla.org/en-US/docs/Web/CSS/visibility的值

div.dependant { border: 0.1px solid rgb(170, 170, 170); background-color: rgb(235,235,228); box-sizing: border-box; } input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type { display: inline-block; } input[type="checkbox"]:checked ~ div.dependant:first-of-type { display: contents; } input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input { visibility: hidden; } <form> <label for="chk1">Enable textbox?</label> <input id="chk1" type="checkbox" /> <br /> <label for="text1">Input textbox label</label> <div class="dependant"> <input id="text1" type="text" /> </div> </form>

上面片段中应用的禁用样式来自Chrome UI,可能在视觉上与其他浏览器上禁用的输入不相同。可能它可以使用特定于引擎的CSS扩展-prefixes为各个浏览器定制。虽然乍一看,我不认为它可以: 微软CSS扩展,Mozilla CSS扩展,WebKit CSS扩展

引入额外的值visibility: disabled或display: disabled或甚至appearance: disabled似乎更明智,因为visibility: hidden已经影响了可应用元素和相关控制元素的行为。

我一直在用:

input.disabled {
  pointer-events:none;
  color:#AAA;
  background:#F5F5F5;
}

然后将CSS类应用到输入字段:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />