1. ホーム
  2. html

[解決済み] テキスト入力欄のCSSセレクタ?

2022-03-23 16:15:56

質問

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

どのように解決するのですか?

input[type=text]

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

form input[type=text]

または、特定のフォームにさらに限定する場合は、そのフォームが id を持っていると仮定して myForm

#myForm input[type=text]

お知らせ IE6で開発する場合は、IE7.jsを使用するか(Yi Jiangが提案したように)、すべてのテキスト入力にクラスを追加する必要があります。

参考 http://www.w3.org/TR/CSS2/selector.html#attribute-selectors


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

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"に戻ってしまうことになります。このような場合には、select all inputs that are not one of the other known typesを使用することができます。

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

しかし、このセレクタはかなりばかげたものになり、また 可能なタイプのリスト は、HTMLに新しい機能が追加されるにつれて、どんどん増えていきます。

お知らせ :not 擬似クラス はIE9からしかサポートされていません。