web-dev-qa-db-ja.com

CSS入力タイプセレクタ-「または」または「しない」構文を使用できますか？

プログラミングに存在する場合）、

次の入力を含むHTMLフォームがある場合：

<input type="text" />
<input type="password" />
<input type="checkbox" />

type="text"またはtype="password"であるすべての入力にスタイルを適用したい。

または、type != "checkbox"のすべての入力に対して解決します。

私はこれをしなければならないようです：

input[type='text'], input[type='password']
{
   // my css
}

する方法はありません：

input[type='text',type='password']
{
   // my css
}

または

input[type!='checkbox']
{
   // my css
}

私は周りを見回しましたが、単一のCSSセレクターでこれを行う方法はないようです。

大したことではありませんが、私は好奇心cat盛な猫です。

何か案は？

htmlcsscss-selectors
87
RPM1984

CSS3には ：not（） という擬似クラスがあります

input:not([type='checkbox']) {    
    visibility: hidden;
}
<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
                                      
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>         
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>


複数のセレクター

Vincentが述べたように、複数の:not()sをつなぎ合わせることが可能です：

input:not([type='checkbox']):not([type='submit'])

まだ広くサポートされていない であるCSS4では、:not()で複数のセレクターを使用できます

input:not([type='checkbox'],[type='submit'])


レガシーサポート

最新のブラウザはすべて、CSS3構文をサポートしています。この質問が行われた時点で、IE7およびIE8のフォールバックが必要でした。 1つのオプションは、 IE9.js のようなポリフィルを使用することでした。もう1つは、CSSのカスケードを活用することです。

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
}
164
Patrick McElhaney
input[type='text'], input[type='password']
{
   // my css
}

それが正しい方法です。悲しいことに、CSSはプログラミング言語ではありません。

22
codemonkeh