web-dev-qa-db-ja.com

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

誰もこれを達成する方法を知っていますか？

csscss-selectorscss3
288
spudly

：notセレクター

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

サポート： Internet Explorer 9以降

455
eveliotc

よりクロスブラウザのソリューションの場合、スタイルを設定できますall入力しない、テキスト、およびパスワードを希望する方法を入力し、ラジオ、チェックボックスなどのスタイルを別のスタイルがオーバーライドします。

input { border:solid 1px red; }

input[type=radio], 
input[type=checkbox], 
input[type=submit], 
input[type=reset], 
input[type=file] 
      { border:none; }

-または-

型付けされていない入力を生成しているコードのどの部分でも、.no-typeのようなクラスを提供したり、単に出力したりできませんか？さらに、このタイプの選択はjQueryで実行できます。

30
Tim Santeford

これに追加したかったのは、selectivizrを使用してoldIEで：notセレクターを使用できることです。 http://selectivizr.com/

10
smets.kevin