blocks|key|665543|text|您可以：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665544|input[type="text"][disabled]+{
+++color:+red;
}|code-block|syntax|javascript|665545|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:</p>

<pre><code>input[type="text"][disabled] {
   color: red;
}
</code></pre>


blocks|key|882816|text|下面的代码让您在IE8中非常接近，也可以在其他浏览器中使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|882817|在您的html中：|882818|<input+type="text"+
+++++++readonly="readonly"++++
+++++++onfocus="this.blur();"+
+++++++tabindex="-1"++++++++++
+++++++class="disabledInput"++
+++++++/>|code-block|syntax|javascript|882819|在你的CSS中：|882820|.disabledInput+{
++++color:+black;
}|882821|在IE8中，悬停时会有轻微的边框颜色变化。一些用于input.disabledInput:hover的CSS可能会解决这个问题。|882822|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The following gets you pretty close in IE8 and works in other browsers too.</p>

<p>In your html:</p>

<pre><code>&lt;input type="text" 
       readonly="readonly"    &lt;!-- disallow editting --&gt;
       onfocus="this.blur();" &lt;!-- prevent focus --&gt;
       tabindex="-1"          &lt;!-- disallow tabbing --&gt;
       class="disabledInput"  &lt;!-- change the color with CSS --&gt;
       /&gt;
</code></pre>

<p>In your CSS:</p>

<pre><code>.disabledInput {
    color: black;
}
</code></pre>

<p>In IE8, there is  a slight amount of border color change on hover.  Some CSS for input.disabledInput:hover could probably take care of this.</p>


blocks|key|882854|text|input[disabled],+input[disabled]:hover+{+background-color:#444;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|882855|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>input[disabled], input[disabled]:hover { background-color:#444; }
</code></pre>


blocks|key|665650|text|用readonly="readonly"替换disabled。我认为这是相同的功能。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|665651|<input+type="text"+class="details-dialog"+readonly="readonly"+style="color:+ur+color;">|code-block|syntax|javascript|665652|entityMap^0|1|J|M|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Replace <code>disabled</code> with <code>readonly="readonly"</code>. I think it is the same function.</p>

<pre><code>&lt;input type="text" class="details-dialog" readonly="readonly" style="color: ur color;"&gt;
</code></pre>


blocks|key|882896|text|似乎没有人找到解决这个问题的办法。我没有一个只基于css的，但是通过使用这个JavaScript技巧，我通常可以处理禁用的输入域。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|882897|请记住，禁用的字段始终遵循它们在被禁用之前获得的样式。所以诀窍是1-启用它们2-更改类3-再次禁用它们。由于这种情况发生得非常快，用户无法理解发生了什么。|882898|一个简单的JavaScript代码应该类似于：|882899|function+changeDisabledClass+(id,+disabledClass){
var+myInput=document.getElementById(id);
myInput.disabled=false;+++++++++++++//First+make+sure+it+is+not+disabled
myInput.className=disabledClass;++++//change+the+class
myInput.disabled=true;+++++++++++++//Re-disable+it
}|code-block|syntax|javascript|882900|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It seems nobody found a solution for this. I don't have one based on only css neither but by using this JavaScript trick I usually can handle disabled input fields.</p>

<p>Remember that disabled fields always follow the style that they got before becoming disabled. So the trick would be 1- Enabling them 2-Change the class 3- Disable them again. Since this happens very fast user cannot understand what happened.</p>

<p>A simple JavaScript code would be something like:</p>

<pre><code>function changeDisabledClass (id, disabledClass){
var myInput=document.getElementById(id);
myInput.disabled=false;             //First make sure it is not disabled
myInput.className=disabledClass;    //change the class
myInput.disabled=true;             //Re-disable it
}
</code></pre>


blocks|key|665725|text|这是我为这个问题找到的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665726|//如果IE|665727|InputElement.writeAttribute(“不可选”，“开”)；|665728|//其他浏览器|665729|inputElement.writeAttribute("disabled"，"disabled")；|665730|通过使用此技巧，您可以将样式表添加到在IE和其他浏览器中不可编辑的输入框中工作的输入元素。|665731|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

<p>It is the solution that I found for this problem:</p>

<p>//If IE</p>

<p>inputElement.writeAttribute("unselectable", "on");</p>

<p>//Other browsers</p>

<p>inputElement.writeAttribute("disabled", "disabled");</p>

<p>By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.</p>


blocks|key|665753|text|您可以将以下样式与不透明度一起使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665754|input[disabled="disabled"],+select[disabled="disabled"],+textarea[disabled="disabled"]+{
++++opacity:+0.85+!important;
}|code-block|syntax|javascript|665755|或特定的CSS类|665756|.ui-state-disabled{
++++opacity:+0.85+!important;
}|665757|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>You could use the following style with opacity</p>

<pre><code>input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity: 0.85 !important;
}
</code></pre>

<p>or a specific CSS class</p>

<pre><code>.ui-state-disabled{
    opacity: 0.85 !important;
}
</code></pre>


blocks|key|665790|text|这适用于使禁用的select选项充当标题。它不会移除:disabled选项的默认文本阴影，但会移除悬停效果。在IE中，你不会得到字体颜色，但至少文本阴影消失了。下面是html和css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665791|​|665792|select+option.disabled:disabled{color:+#5C3333;background-color:+#fff;font-weight:+bold;}
select+option.disabled:hover{color:++#5C3333+!important;background-color:+#fff;}
select+option:hover{color:+#fde8c4;background-color:+#5C3333;}|code-block|syntax|javascript|665793|<select>
+++++<option+class="disabled"+disabled>Header1</option>
+++++<option>Item1</option>
+++++<option>Item1</option>
+++++<option>Item1</option>
+++++<option+class="disabled"+disabled>Header2</option>
+++++<option>Item2</option>
+++++<option>Item2</option>
+++++<option>Item2</option>
+++++<option+class="disabled"+disabled>Header3</option>
+++++<option>Item3</option>
+++++<option>Item3</option>
+++++<option>Item3</option>
</select>|665794|665795|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This works for making disabled select options act as headers. It doesnt remove the default text shadow of the :disabled option but it does remove the hover effect. In IE you wont get the font color but at least the text-shadow is gone. Here is the html and css:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;}
select option.disabled:hover{color:  #5C3333 !important;background-color: #fff;}
select option:hover{color: #fde8c4;background-color: #5C3333;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
     &lt;option class="disabled" disabled&gt;Header1&lt;/option&gt;
     &lt;option&gt;Item1&lt;/option&gt;
     &lt;option&gt;Item1&lt;/option&gt;
     &lt;option&gt;Item1&lt;/option&gt;
     &lt;option class="disabled" disabled&gt;Header2&lt;/option&gt;
     &lt;option&gt;Item2&lt;/option&gt;
     &lt;option&gt;Item2&lt;/option&gt;
     &lt;option&gt;Item2&lt;/option&gt;
     &lt;option class="disabled" disabled&gt;Header3&lt;/option&gt;
     &lt;option&gt;Item3&lt;/option&gt;
     &lt;option&gt;Item3&lt;/option&gt;
     &lt;option&gt;Item3&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|883019|text|可以简单地将CSS应用于disabled输入。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883020|input:disabled+{
++color:+black;
}|code-block|syntax|javascript|883021|entityMap^0|C|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can simply apply CSS to <code>disabled</code> input</p>
<pre><code>input:disabled {
  color: black;
}
</code></pre>


<p>I need to change the style for a disabled input element in CSS.</p>

<pre class="lang-xml prettyprint-override"><code>&lt;input type="text" class="details-dialog" disabled="disabled" /&gt;
</code></pre>

<p>How I can do this for Internet Explorer?</p>


How to change font-color for disabled input?

我需要更改CSS中禁用的输入元素的样式。<input type="text" class="details-dialog" disabled="disabled" />如何在Internet Explorer中执行此操作？

问如何更改禁用输入的字体颜色？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改禁用输入的字体颜色？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改禁用输入的字体颜色？
EN