web-dev-qa-db-ja.com

HTMLでスタイリングが無効な<select>（ドロップダウンボックス）

顧客の1人が、Webベースアプリケーションの無効なコントロールの灰色のテキストを読むのに苦労しています。

IE9 example

スタイルを明るい灰色の背景と黒いテキストに変更したいと思います。残念なことに、ほとんどのブラウザ（顧客が使用しているIEを含む）は、無効なコントロールのcolor: ... CSS属性を無視するため、前景色を変更できません。

テキストボックス（input type="text"）の場合、readonly属性の代わりにdisabledを使用することで簡単に回避できます。残念ながら、これはドロップダウン（select）またはチェックボックス（input type="checkbox"）のオプションではありません。

そのための簡単な回避策はありますか？コントロールを別のタイプのコントロールに置き換える必要のない方が望ましいですか？ （...コントロールはASP.NETによってレンダリングされるため）

PS：CSSで[disabled]セレクターを使用しても違いはありません。

htmlcssaccessibility
19
Heinzi

Internet Explorer 9では、:disabled疑似セレクターのサポートが追加されます（- ref ）。それが「色」プロパティを尊重するかどうかはわかりませんが、可能性が高いようです。

IEの古いバージョンでは、背景色を調整できます（ただし、色は調整できません）。したがって：

    <style type="text/css">
        select[disabled] { background-color: blue; }
    </style>

これは、IE 7およびIE 8。灰色IE無効にすると割り当てられます。

30
Will Martin

これは、webkitとFirefoxで機能しました

select:disabled{
   opacity: 0.6;
}
5
Darren Cooney

これは私のために働いた

select[disabled='disabled']::-ms-value {
    color: red;
   }
2
Disha teli

まだこれを見つけている人のために。

動作していません：

select[disabled] { background-color: blue; }

ワーキング：

select option [disabled] { background-color: blue; } will do
1
Joost Boord

私の英語でごめんなさい...

Cssだけでは使用できません。IEは無効な選択タグのプロパティの変更を許可しません

1
el_quick

以下を試すことができます：

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #555;
        }
    </style>
0
sendon1982