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

Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -

是否可以使用CSS禁用表单字段?我当然知道禁用属性，但是是否可以在CSS规则中指定它?类似的,

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.

我这么问的原因是，我有一个应用程序，它自动生成表单字段，并且根据一些规则(在Javascript中运行)隐藏/显示字段。现在我想扩展它来支持禁用/启用字段，但是规则的编写方式直接操作表单字段的样式属性。因此，现在我必须扩展规则引擎来更改属性和表单字段的样式，这似乎不太理想。

It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?

很奇怪，您在CSS中有可见和显示属性，但没有启用/禁用。在HTML5标准中是否有类似的东西，或者甚至是非标准的(特定于浏览器的)?

12 个解决方案

#1

You can fake the disabled effect using CSS.

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

pointer-events:none;

You might also want to change colors etc.

你也可以改变颜色等等。

#2

Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?

既然规则是在JavaScript中运行的，为什么不使用JavaScript(或者在我的示例中是jQuery)禁用它们呢?

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

UPDATE

更新

The attr function is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the prop function.

正如在下面的评论中指出的那样，attr功能不再是主要的方法。这是用支柱函数完成的。

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

#3

This can be helpful:

这可能是有益的:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Update:

更新:

and if want to disable from tab index you can use it this way:

如果想要禁用标签索引，你可以这样使用:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

#4

It's very curious that you have visible and display properties in CSS but not enable/disable.

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

It's very curious that you think that's very curious. You're misunderstanding the purpose of CSS. CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.

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

To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.

要禁用字段，必须使用HTML中的禁用属性或JavaScript中的禁用的DOM属性。

#5

You can't use CSS to disable Textbox. solution would be HTML Attribute.

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

disabled="disabled"

#6

The practical solution is to use CSS to actually hide the input.

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

To take this to its natural conclusion, you can write two html inputs for each actual input (one enabled, and one disabled) and then use javascript to control the CSS to show and hide them.

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

#7

first time answering something, and seemingly just a bit late...

第一次回答问题，似乎有点晚……

I agree to do it by javascript, if you're already using it.

我同意用javascript来做，如果你已经在用它了。

For a composite structure, like I usually use, I've made a css pseudo after element to block the elements from user interaction, and allow styling without having to manipulate the entire structure.

对于像我通常使用的组合结构，我已经创建了一个css pseudo after元素，以阻止来自用户交互的元素，并允许样式化，而不需要操作整个结构。

For Example:

例如:

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

I can place a disabled class on the wrapping div

我可以在包装div中放置一个禁用类

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

This would grey text within the div and make it unusable to the user.

这将使div中的文本变为灰色，用户无法使用它。

My example JSFiddle

我的例子JSFiddle

#8

I am always using:

我总是使用:

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

and then applying the css class to the input field:

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

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

#9

You cannot do that I'm afraid, but you can do the following in jQuery, if you don't want to add the attributes to the fields. Just place this inside your <head></head> tag

恐怕您不能这样做，但是如果您不想向字段添加属性，您可以使用jQuery来完成以下操作。把这个放进你的标签。

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

If you are generating the fields in the DOM (with JS), you should do this instead:

如果您正在用JS生成DOM中的字段，那么您应该这样做:

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

#10

There's no way to use CSS for this purpose. My advice is to include a javascript code where you assign or change the css class applied to the inputs. Something like that :

没有办法为此目的使用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>

#11

This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and CSS.

这可以通过在输入元素之上放置一个覆盖层来实现非关键的目的。这是我在纯HTML和CSS中的例子。

https://jsfiddle.net/1tL40L99/

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>

#12

input[name=username] { disabled: true; /* Does not work */ }

输入[name =用户名]{禁用:真实;/*无效*/}

I know this question is quite old but for other users who come across this problem, I suppose the easiest way to disable input is simply by ':disabled'

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

In reality, if you have some script to disable the input dynamically/automatically with javascript or jquery that would automatically disable based on the condition you add.

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

In jQuery for Example:

例如:在jQuery

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

Hope the answer in CSS helps.

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