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

Question

是否可以使用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标准,甚至是非标准的(浏览器特定的)是否有类似的东西？

Answer 1

您可以使用CSS伪造禁用的效果.

pointer-events:none;

您可能还想更改颜色等.

Answer 2

由于规则是在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

Answer 3

这可能会有所帮助:

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

Answer 4

很奇怪你在CSS中有可见和显示属性但没有启用/禁用.

你觉得这很好奇,这很奇怪.你误解了CSS的目的.CSS并不意味着改变表单元素的行为.这意味着只改变他们的风格.隐藏文本字段并不意味着文本字段不再存在,或者提交表单时浏览器不会发送其数据.它所做的就是将其隐藏在用户的眼前.

要实际禁用字段,必须使用disabledHTML中的属性或disabledJavaScript中的DOM属性.

Answer 5

您无法使用CSS来禁用文本框.解决方案是HTML属性.

disabled="disabled"

Answer 6

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

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

Answer 7

第一次回答什么,似乎有点迟了......

如果您已经使用它,我同意通过javascript执行此操作.

对于复合结构,就像我通常使用的那样,我已经创建了一个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>

我可以disabled在包装上放一个课div

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

这将是灰色文本,div并使其无法用户使用.

我的例子JSFiddle

Answer 8

输入[名称=用户名] { 禁用：真；/* 不起作用 */ }

我知道这个问题很老了，但对于遇到这个问题的其他用户，我想禁用输入的最简单方法就是通过 ':disabled'

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

实际上，如果您有一些脚本可以使用 javascript 或 jquery 动态/自动禁用输入，这些脚本会根据您添加的条件自动禁用。

以jQuery为例：

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

希望 CSS 中的答案有所帮助。

Answer 9

我一直在使用:

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

然后将css类应用于输入字段:

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