blocks|key|902999|text|您可以使用CSS伪造禁用效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903000|pointer-events:none;|code-block|syntax|javascript|903001|您可能还想更改颜色等。|903002|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can fake the disabled effect using CSS.</p>

<pre><code>pointer-events:none;
</code></pre>

<p>You might also want to change colors etc.</p>


blocks|key|686345|text|不能使用CSS禁用Textbox。解决方案是HTML属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686346|disabled="disabled"|code-block|syntax|javascript|686347|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can't use CSS to disable Textbox.
solution would be HTML Attribute.</p>

<pre><code>disabled="disabled"
</code></pre>


blocks|key|902859|text|实际的解决方案是使用CSS来实际隐藏输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902860|要得出这样的结论，您可以为每个实际输入编写两个html输入(一个启用，一个禁用)，然后使用javascript控制CSS来显示和隐藏它们。|902861|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>The practical solution is to use CSS to actually hide the input.</p>

<p>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.</p>


blocks|key|902958|text|第一次回答问题，看起来有点晚……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902959|我同意使用javascript，如果你已经在使用它的话。|902960|对于复合结构，就像我通常使用的那样，我创建了一个css伪after元素来阻止元素与用户交互，并允许在不必操作整个结构的情况下设置样式。|902961|例如：|902962|<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>|code-block|syntax|javascript|902963|我可以在包装的div上放置一个disabled类|offset|length|style|CODE|902964|.disabled+{+
++++position+:+relative;+
++++color++++:+grey;
}
.disabled:after+{
++++position+:absolute;
++++left+++++:+0;
++++top++++++:+0;
++++width++++:+100%25;
++++height+++:+100%25;
++++content++:'+';
}|902965|这将使div中的文本变灰，并使用户无法使用它。|902966|My+example+JSFiddle|902967|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/larchy/Y46ar/^0|0|0|0|0|0|7|3|F|8|0|0|3|3|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$O|1C|P|1D|Q|R]|$O|1E|P|1F|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1H|8|@$O|1I|P|1J|Q|R]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$O|1L|P|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>first time answering something, and seemingly just a bit late...</p>
<p>I agree to do it by javascript, if you're already using it.</p>
<p>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.</p>
<p>For Example:</p>
<pre><code>&lt;div id=test class=stdInput&gt;
    &lt;label class=stdInputLabel for=selecterthingy&gt;A label for this input&lt;/label&gt;
    &lt;label class=selectWrapper&gt;
         &lt;select id=selecterthingy&gt;
             &lt;option selected disabled&gt;Placeholder&lt;/option&gt;
             &lt;option value=1&gt;Option 1&lt;/option&gt;
             &lt;option value=2&gt;Option 2&lt;/option&gt;
         &lt;/select&gt;
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>I can place a <code>disabled</code> class on the wrapping <code>div</code></p>
<pre class="lang-css prettyprint-override"><code>.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}
</code></pre>
<p>This would grey text within the <code>div</code> and make it unusable to the user.</p>
<p><a href="http://jsfiddle.net/larchy/Y46ar/" rel="nofollow noreferrer">My example JSFiddle</a></p>


blocks|key|903078|text|我一直在使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903079|input.disabled+{
++pointer-events:none;
++color:#AAA;
++background:#F5F5F5;
}|code-block|syntax|javascript|903080|然后将css类应用于输入字段：|903081|<input+class="disabled"+type="text"+value="90"+name="myinput"+id="myinput"+/>|903082|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I am always using:</p>
<pre class="lang-css prettyprint-override"><code>input.disabled {
  pointer-events:none;
  color:#AAA;
  background:#F5F5F5;
}
</code></pre>
<p>and then applying the css class to the input field:</p>
<pre><code>&lt;input class=&quot;disabled&quot; type=&quot;text&quot; value=&quot;90&quot; name=&quot;myinput&quot; id=&quot;myinput&quot; /&gt;
</code></pre>


blocks|key|686431|text|恐怕您不能这样做，但是如果您不想将属性添加到字段中，则可以在jQuery中执行以下操作。只需将此代码放入<head></head>标记即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|686432|$(document).ready(function(){+
++$(".inputClass").focus(function(){
++++$(this).blur();
++});+
});|code-block|syntax|javascript|686433|如果您在DOM中生成字段(使用JS)，则应改为这样做：|686434|$(document).ready(function(){+
++$(document).on("focus",+".inputClass",+function(){
++++$(this).blur();
++});+
});|686435|entityMap^0|1G|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>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 <code>&lt;head&gt;&lt;/head&gt;</code> tag</p>

<pre><code>$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});
</code></pre>

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

<pre><code>$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});
</code></pre>


blocks|key|903040|text|对于非关键目的，这可以通过在输入元素上放置一个覆盖来完成。下面是我用纯HTML和CSS编写的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903041|https://jsfiddle.net/1tL40L99/|offset|length|903042|++++<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>|code-block|syntax|javascript|903043|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>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.</p>

<p><a href="https://jsfiddle.net/1tL40L99/" rel="nofollow">https://jsfiddle.net/1tL40L99/</a></p>

<pre><code>    &lt;div id="container"&gt;
        &lt;input name="name" type="text" value="Text input here" /&gt;
        &lt;span id="overlay"&gt;&lt;/span&gt;
    &lt;/div&gt;

    &lt;style&gt;
        #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);
        }
    &lt;/style&gt;
</code></pre>


blocks|key|686686|text|没有办法使用CSS来达到这个目的。我的建议是包含一段javascript代码，您可以在其中分配或更改应用于输入的css类。大概是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686687|​|686688|function+change_input()+{
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled',+'');
	$('.class_enabled').removeAttr('disabled',+'');
}|code-block|syntax|javascript|686689|.class_disabled+{+background-color+:+#FF0000;+}
.class_enabled+{+background-color+:+#00FF00;+}|686690|<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>|686691|686692|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>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 :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;form&gt; 	
	Input: &lt;input id="id_input1" class="class_enabled" /&gt;		
	&lt;input type="button" value="Toggle" onclick="change_input()";/&gt;	
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


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

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

<p>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.</p>

<p>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)?</p>


How do I disable form fields using CSS?

jQuery

HTML5

是否可以使用CSS禁用表单域？我当然知道属性disabled，但是否可以在CSS规则中指定此属性？就像这样-<input type="text" name="username" value="admin" ><style type="text/css">  input[name=username] {    disabled: true; /* Does not work */  }</style

问如何使用CSS禁用表单域？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS禁用表单域？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS禁用表单域？
EN