☰

属性 x のない要素に一致する CSS セレクター [重複] 質問する

tag-icon • tag-icon css-selectors css
属性 x のない要素に一致する CSS セレクター [重複] 質問する

私は 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 属性が指定されていないすべての入力ボックスを選択したいのです (デフォルトではテキストになっていますが、input[type='text']一致しないため)。残念ながら、CSS3 仕様にはそのようなセレクターは見つかりませんでした。

これを実現する方法を誰か知っていますか?

ベストアンサー1

:notセレクタ：

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

サポート：Internet Explorer 9以降

おすすめ記事