web-dev-qa-db-ja.com

<input type = "？"のCSSセレクター

タイプに基づいてすべての入力をターゲットにするCSSの方法はありますか？さまざまな無効化されたフォーム要素で使用する無効化されたクラスがあり、テキストボックスの背景色を設定していますが、チェックボックスでその色を取得したくないです。

私は別のクラスでこれを行うことができることを知っていますが、可能であればCSSを使用したいです。確かに、JavaScriptでこれを設定できますが、CSSを再度探します。

IE7 +をターゲットにしています。したがって、CSS3を使用できるとは思わない。

編集

CSS3を使用すると、次のようなことができますか？

INPUT[type='text']:disabledそれは私のクラスを完全に取り除くのにさらに良いでしょう...

編集

助けてくれてありがとう！だから、クラスを設定することなく無効になっているすべてのテキストボックスとエリアを変更するセレクターがあります。この質問を始めたとき、これが可能だとは思わなかった...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

これはIE7で動作します

cssinternet-explorercss-selectors
105
JoshBerke

はい。 IE7 +は属性セレクターをサポートしています：

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

特定の値に等しい、始まる、含む、または終わる値を含む属性タイプを持つ要素入力。

その他の安全な（IE7 +）セレクターは次のとおりです。

  • 親>を持つ子：p > span { font-weight: bold; }
  • 先行する〜要素：span ~ span { color: blue; }

<p><span/><span/></p>のどれが効果的ですか：

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

さらに読む： quirksmode.comのブラウザーCSS互換性

私は他の誰もがそれができないと思っていることに驚いています。 CSS属性セレクターは、しばらくの間すでに存在しています。 .cssファイルをクリーンアップするときだと思います。

154
Filip Dupanović

悲しいことに、他のポスターはあなたが正しいということです ...実際にはkRONで修正されているように、yoはIE7と厳密なドキュメントでは問題ありませんが、most of us IE6の要件は、JSまたはこのクラス参照に制限されます、しかし、それはis CSS2プロパティであり、IE ^ h ^ hブラウザからの十分なサポートのないものです。

完全ではないため、タイプセレクターは-xpathに似ています-[attribute=value]の形式ですが、多くの興味深い変形が存在します。 will使用可能な場合は非常に強力であり、IE8を頭に入れておくことは良いことです。

3
annakata

これはjQueryを使用して実行できます。セレクターを使用して、タイプなどの属性で選択できます。ただし、これには、ユーザーがJavascriptをオンにし、追加のファイルをダウンロードする必要がありますが、機能する場合は...

1
cdeszaq

申し訳ありませんが、短い答えはノーです。 CSS（2.1）はDOMの要素のみをマークアップし、属性はマークアップしません。特定のクラスを各入力に適用する必要があります。

それは信じられないほど便利だからです。

JavaScriptよりもCSSの方がいいと言っていることは知っていますが、jQueryの使用を検討する必要があります。属性に基づいてDOM要素にスタイルを追加する非常にクリーンでエレガントな方法を提供します。

0
Phil.Wheeler