如何使用 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 中有可见和显示属性但没有启用/禁用。

您误解了 CSS 的用途。 CSS 并不是要改变表单元素的行为。这只是为了改变他们的风格。隐藏文本字段并不意味着文本字段不再存在，或者当您提交表单时浏览器不会发送其数据。它所做的只是将其隐藏在用户的视线之外。

要真正禁用您的字段，您必须在 HTML 中使用 disabled 属性或在 JavaScript 中使用 disabled DOM 属性。

Answer 2

我一直在使用：

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

然后将 css 类应用到输入字段：

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

Answer 3

第一次回答，好像有点晚了……

如果您已经在使用它，我同意使用 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>

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

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

这会使div 中的文本变灰，使其对用户无法使用。

My example JSFiddle

Answer 4

pointer-events: none; 解决方案的一个变体解决了输入仍可通过其标记为 control 或 tabindex 访问的问题，它将输入包装在一个 div 中，该 div 被设置为禁用的文本输入，并设置 @ 987654326@ 当输入被“禁用”时。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

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>

上面 sn-p 中应用的禁用样式取自 Chrome UI，在视觉上可能与其他浏览器上的禁用输入不同。可能它可以使用特定于引擎的 CSS 扩展 - 前缀为单个浏览器定制。虽然乍一看，我不认为它可以：
Microsoft CSS extensions，Mozilla CSS extensions，WebKit CSS extensions

考虑到visibility: hidden 已经影响任何关联的适用元素的行为，引入附加值visibility: disabled 或display: disabled 甚至可能是appearance: disabled 似乎更明智控制元素。

Answer 5

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

我知道这个问题已经很老了，但是对于遇到这个问题的其他用户，我想禁用输入的最简单方法就是通过 ':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 6

这可能会有所帮助：

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

Answer 7

既然规则在 JavaScript 中运行，为什么不使用 javascript（或者在我的示例中为 jQuery）禁用它们？

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

更新

attr 函数不再是解决此问题的主要方法，正如下面的 cmets 中所指出的那样。这现在通过prop 函数完成。

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Answer 8

没有办法为此目的使用 CSS。 我的建议是包含一个 javascript 代码，您可以在其中分配或更改应用于输入的 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>

Answer 9

这可以通过在输入元素的顶部放置一个覆盖来实现非关键目的。这是我的纯 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>

Answer 10

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

pointer-events:none;

您可能还想更改颜色等。

Answer 11

恐怕你不能这样做，但如果你不想将属性添加到字段中，你可以在 jQuery 中执行以下操作。只需将其放在您的 <head></head> 标签中

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

如果你在 DOM 中生成字段（使用 JS），你应该这样做：

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Answer 12

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

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

Answer 13

您不能使用 CSS 来禁用文本框。 解决方案是 HTML 属性。

disabled="disabled"