web-dev-qa-db-ja.com

無効な入力のフォント色を変更する方法は？

CSSの無効な入力要素のスタイルを変更する必要があります。

<input type="text" class="details-dialog" disabled="disabled" />

Internet Explorerでこれを行うにはどうすればよいですか？

cssinternet-explorerinput
49
isxaker

Internet Explorerでは使用できません。

このコメントを参照してください 関連トピックについて書きました：

良い方法はないようです、参照してください： css を使用してIE8で無効なhtmlコントロールの色を変更する方法-入力を代わりにreadonlyですが、他の結果があります（readonlyの場合、inputは送信時にサーバーに送信されますが、disabledの場合はそうではありません）： http://jsfiddle.net/wCFBw/40

また、以下を参照してください： 無効になっているIEのテキストボックスのフォント色の変更

45
thirtydot

あなたはできる：

input[type="text"][disabled] {
   color: red;
}
39
Alex K.

以下はIE8であなたをかなり近づけ、他のブラウザでも動作します。

あなたのhtmlで：

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

CSSで：

.disabledInput {
    color: black;
}

IE8では、ホバー時に境界線の色がわずかに変化します。 input.disabledInput：hoverの一部のCSSは、おそらくこれを処理できます。

19
Charles
input[disabled], input[disabled]:hover { background-color:#444; }
7
khan

disabledをreadonly="readonly"に置き換えます。同じ機能だと思います。

<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">
4
irfan tri atmojo

誰もこの解決策を見つけていないようです。私はCSSだけに基づいたものも持っていませんが、このJavaScriptトリックを使用することで、通常は無効な入力フィールドを処理できます。

無効化されたフィールドは常に、無効化される前に取得したスタイルに従います。トリックは1-それらを有効にする2-クラスを変更する3-それらを再び無効にするこれは非常に高速で発生するため、ユーザーは何が起こったのか理解できません。

単純なJavaScriptコードは次のようになります。

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
}
2
Arash

次のスタイルを不透明度で使用できます

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity: 0.85 !important;
}

または特定のCSSクラス

.ui-state-disabled{
    opacity: 0.85 !important;
}
1
myset

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

// IEの場合

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

//他のブラウザ

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

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

1
Homa

これは、無効な選択オプションをヘッダーとして機能させるために機能します。 ：disabledオプションのデフォルトのテキストシャドウは削除されませんが、ホバー効果は削除されます。 IEでは、フォントの色は取得できませんが、少なくともテキストの影は消えています。 htmlとcssは次のとおりです。

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;}
<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>
1
yardpenalty

代わりにreadonlyを使用できます。次はあなたのためのトリックを行います。

<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>

ただし、次のことに注意する必要があります。ビジネス要件に応じて、使用できます。

読み取り専用要素は編集できませんが、対応するフォームが送信されると送信されます。無効な要素は編集できず、送信時に送信されません。

0
Dulith De Costa