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

<强>更新

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>

<强>更新

如果想要从标签索引中禁用，您可以这样使用它：

 <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并不意味着更改表单元素的行为。这意味着只改变他们的风格。隐藏文本字段并不意味着文本字段不再存在，或者提交表单时浏览器不会发送其数据。它只是将其隐藏在用户眼中。

要实际停用字段，必须使用HTML中的disabled属性或JavaScript中的disabled 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中的灰色文本，并使其无法用户使用。

My example JSFiddle

Answer 8

我一直在使用：

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

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

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

Answer 9

输入[name = username] { 禁用：true; / *不起作用* /}

我知道这个问题很老但是对于遇到此问题的其他用户，我认为禁用输入的最简单方法是“禁用”

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

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

中即可

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

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

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

Answer 11

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

为此目的无法使用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 13

pointer-events: none;解决方案的一种变体，它解决了仍可以通过标记为control或tabindex进行访问的输入的问题，将输入包装在div中，该div样式为禁用的文本输入，并且输入“禁用”时设置input { visibility: hidden; }。
参考：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>

上面代码段中应用的禁用样式来自Chrome UI，并且在视觉上可能与其他浏览器上的禁用输入不同。可能可以使用特定于引擎的CSS扩展名-prefixes为各个浏览器进行自定义。尽管乍一看，但我认为它不可能：
Microsoft CSS extensions，Mozilla CSS extensions，WebKit CSS extensions

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

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

13 个答案: