Селекторы типа ввода CSS - возможно ли иметь синтаксис «или» или «нет»? - PullRequest
82 голосов
/ 10 августа 2010

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

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

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

Есть идеи?

Ответы [ 2 ]

159 голосов
/ 10 августа 2010

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() с:

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

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

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


Legacy support

Все современные браузеры поддерживают синтаксис CSS3. В то время, когда был задан этот вопрос, нам нужен был запасной вариант для IE7 и IE8. Одним из вариантов было использование полифилла, например 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!
} 
21 голосов
/ 10 августа 2010
input[type='text'], input[type='password']
{
   // my css
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...