テキスト入力フィールドの CSS セレクター? 質問する

テキスト入力フィールドの CSS セレクター? 質問する

CSS セレクターを使用して「テキスト」タイプの入力フィールドをターゲットにするにはどうすればよいですか?

ベストアンサー1

input[type=text]

または、フォーム内のテキスト入力に制限する

form input[type=text]

あるいは、さらに特定の形式に限定して、それがIDを持っていると仮定するmyForm

#myForm input[type=text]

注意: これは IE6 ではサポートされていないため、IE6 用に開発する場合は、IE7.js (Yi Jiang の提案どおり) を使用するか、すべてのテキスト入力にクラスを追加してください。

参照:http://www.w3.org/TR/CSS2/selector.html#属性セレクタ


なぜなら指定されているデフォルトの属性値は属性セレクターで常に選択できるとは限らないため、テキスト入力がレンダリングされるマークアップの他のケースをカバーしようとすると、次のようになります。

input:not([type]), /* type attribute not present in markup */
input[type=""],    /* type attribute present, but empty    */
input[type=text]   /* type is explicitly defined as 'text' */

それでも、型が定義されているが無効な値があり、type="text"にフォールバックするケースが残ります。これをカバーするには、他の既知の型ではないすべての入力を選択することができます。

input:not([type=button]):not([type=password]):not([type=submit])...

しかし、このセレクターはかなり馬鹿げているし、可能なタイプのリストHTML に新しい機能が追加され、成長しています。

注意::not擬似クラスIE9 以降でのみサポートされます。

おすすめ記事