Селекторы типа ввода CSS - можно ли использовать синтаксис «или» или «нет»?


101

Если они существуют в программировании),

Если у меня есть 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.

Ничего страшного, конечно, но я просто любопытный кот.

Любые идеи?

Ответы:


183

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>


Множественные селекторы

Как упомянул Винсент, можно связать несколько :not()s вместе:

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

CSS4, который пока широко не поддерживается , позволяет использовать несколько селекторов в:not()

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


Устаревшая поддержка

Все современные браузеры поддерживают синтаксис CSS3. В то время, когда был задан этот вопрос, нам требовался откат для IE7 и IE8. Один из вариантов заключается в использовании polyfill как IE9.js . Другой - использовать каскад в 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!
} 

1
хороший! Спасибо. этот селектор CSS3 полностью поддерживается? (меня действительно интересуют только IE7 +, FF3 +, недавние Safari, недавние Chrome)
RPM1984,

1
Он поддерживается в IE9 + и во всех других современных браузерах. quirksmode.org/css/contents.html#t37
Патрик МакЭлхани

12
Для полноты картины, если вы хотите использовать несколько "not", используйте следующий синтаксис: input: not ([type = 'checkbox']): not ([type = 'submit'])
Винсент,

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

Это правильный способ сделать это. К сожалению, CSS не является языком программирования.


4
Однако вы можете использовать Less CSS или Sass.
vbullinger 03

Меньше, да! Я люблю это.
Бартломей Залевски
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.