web-dev-qa-db-ja.com

IE8でCSSを使用して無効化されたHTMLコントロールの色を変更する方法

次のCSSを使用して、無効になっている入力コントロールの色を変更しようとしています。

input[disabled='disabled']{
  color: #666;     
}

これはほとんどのブラウザで機能しますが、IEでは機能しません。 background-color、border-colorなど、他のスタイルプロパティを変更できます。色だけではありません。誰でもこれを説明できますか？

htmlcssinternet-explorer
72
Seth Reno

残念ながら、disabled属性を使用する場合、何を試してもIEはテキストの色をグレーにデフォルト設定し、奇妙な白い影...もの...さらに他のすべてのスタイルを使用します引き続き機能します：-/

122
Wayne Austin

IE10の<select>要素にも同じ問題があり、選択要素に対してのみ機能するソリューションが見つかりました。

http://jsbin.com/ujapog/7/

テキストの色を変更できるMicrosoftの擬似要素があります。

select[disabled='disabled']::-ms-value {
    color: #000;
}

それ以外のブラウザは構文エラーのためにルール全体を無視するため、ルールは独自のものでなければなりません。他のInternet Explorerのみの擬似要素については、 http://msdn.Microsoft.com/en-us/library/ie/hh869604（v = vs.85）.aspx を参照してください。

編集：ルールはおそらくselect[disabled]::-ms-valueであるべきだと思いますが、古いバージョンIEを試してみる前にバージョンがありません-この段落を再編集するか、コメントを追加します改善です。

14
robocat

Disable = "disable"属性のスタイルをオーバーライドする方法はありません。この問題を修正するための回避策は次のとおりです。私の場合は送信ボタンのみを選択しています。

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

利用可能な例： http://jsfiddle.net/0dr3jyLp/

8
Hamid Tavakoli

Textareaがフォントの色をグレーに変更することを「無効化」するのと同じ問題がありました。以下のCSSでtextareaに「無効」属性の代わりに「読み取り専用」属性を使用して回避策を行いました

textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color        
color:#ffffff;// Desired text color
}

それは私にとって魅力的なものでした!!.

4
Lihkinisak

このトピックを作成してからしばらく経ちましたが、この回避策を作成しました。 （IE 9を使用）

唯一の結果は、入力の値を選択できないことです。

JavaScriptを使用：

    if (input.addEventListener)
            input.addEventListener('focus', function(){input.blur()}, true)
    if (input.attachEvent)
            input.attachEvent("onfocus", function(){input.blur()})
3
Cold Hiller

背景全体を明るい灰色にしただけで、ボックスが無効になっていることをより簡単に/すばやく伝えることができると思います。

input[disabled]{
  background: #D4D4D4;     
}
2
viggity

ウェインが言及したように、そして3年後もまだIE9で運はありませんが...

CSSを使用してopacityを下げてみると、読みやすくなり、無効状態全体に役立ちます。

1
guzart

IE type = checkboxの入力コントロールのあるgrayい灰色なしでコントロールを「無効にする」問題を解決する方法は、有効にしておき、onclickで小さなjavascriptを使用することでした。変更を防ぐイベント：

onclick='this.checked == true ? this.checked = false : this.checked = true;'
1
Booji Boy

この投稿を読んだ後、無効な入力ボックスと同様に機能するが「読み取り専用」の入力を作成することにしました。

そのため、選択またはタブ移動ができないように、またはユーザーが値を変更または選択できるというアイデアをユーザーに与えるマウスカーソルを持たないようにしました。

IE8/9、Mozzila 18でテスト済みChrome 29

<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>


input.accountInputDisabled {
    border: 1px solid #BABABA !important;
    background-color: #E5E5E5 !important;    
    color: #000000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -moz-user-input: disabled;
    -ms-user-select: none;
    cursor:not-allowed;
}

input:focus {
    outline: none;
}
0
kaffeemeister

無効属性を削除し、読み取り専用属性を使用します。必要な結果を得るために必要なCSSを作成します。これはIE8およびIE9で機能します。

たとえば、ダークグレーの場合、

 input[readonly]{
   color: #333333;     
 }
0
Sahana

私はuser1733926とHamidのソリューションを混ぜて、IE8の効果的なコードを見つけました。IE8でも機能するかどうか、つまり9/10でも機能するかどうかを知るのはいいことです（？）。

<script type="text/javascript">
if ($.browser.msie) {
    $("*[disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("unselectable", "on");
    });
}
</script>
0
vince357

このCSSコードを確認してください。

input[type='button']:disabled, button:disabled
 {
    color:#933;
    text-decoration:underline;
}

またはこのURLを確認してください。 http://jsfiddle.net/kheema/uK8cL/13/

0
Kheema Pandey

クラスベースのアプローチを使用してCSSをオーバーライドする必要はなく、イベントで遊ぶことは完全に機能します。

1つのことができます。

<button class="disabled" onmousedown="return checkDisable();">

function checkDisable() {
 if ($(this).hasClass('disabled')) { return false; }
 }

http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/

0
Navneet Nagpal

それは私がこの問題のために見つけた解決策です：

// IEの場合

inputElement.writeAttribute（ "unselectable"、 "on"）;

//他のブラウザ

inputElement.writeAttribute（ "disabled"、 "disabled"）;

このトリックを使用することにより、IEおよび編集不可の入力ボックス上の他のブラウザーで動作するスタイルシートを入力要素に追加できます。

0
Homa

この問題はIE11で解決されました。それでもIE11で問題が解決しない場合は、レンダリングエンジンIEが使用されていることを確認してください。

0
Aman Srivastava