1. ホーム
  2. css-selectors

[解決済み】x属性のない要素にマッチするcssセレクタ【重複あり

2022-03-25 14:51:50

質問

CSSファイルを作成していて、テキスト入力ボックスにスタイルを設定する必要があるのですが、問題が発生しました。これらの要素すべてにマッチするシンプルな宣言が必要です。

<input />
<input type='text' />
<input type='password' />

...が、これらにはマッチしない。

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

以下は、私がやりたいことです。

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

上記のCSSでは、最初のセレクタが input[!type] . この意味は、type 属性が指定されていないすべての入力ボックスを選択したい(デフォルトは text だが input[type='text'] が一致しない)。残念ながら、私が見つけたCSS3仕様には、そのようなセレクタはありません。

どなたか、これを実現する方法をご存じないでしょうか?

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

:not セレクターを使用します。

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

サポートします。 Internet Explorer 9 以降の場合