CSS 입력 유형 선택기- "or"또는 "not"구문을 사용할 수 있습니까?


101

프로그래밍에 존재하는 경우),

다음 입력이 포함 된 HTML 양식이있는 경우 :

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

type="text"또는 인 모든 입력에 스타일을 적용하고 싶습니다 type="password".

또는 모든 입력의 where 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>


다중 선택기

Vincent가 언급했듯이 여러 개의 :not()s를 함께 묶을 수 있습니다.

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

아직 널리 지원되지 않는 CSS4 는 하나의:not()

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


레거시 지원

모든 최신 브라우저는 CSS3 구문을 지원합니다. 이 질문을 받았을 때 IE7 및 IE8에 대한 대체가 필요했습니다. 한 가지 옵션은 IE9.js와 같은 polyfill 을 사용하는 것이 었습니다 . 또 다른 방법은 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
Patrick McElhaney 2012 년

12
완전성을 위해 여러 "not"을 수행하려면 다음 구문을 사용하십시오. input : not ([type = 'checkbox']) : not ([type = 'submit'])
Vincent

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

그것이 올바른 방법입니다. 안타깝게도 CSS는 프로그래밍 언어가 아닙니다.


4
하지만 Less CSS 또는 Sass를 사용할 수 있습니다.
vbullinger 2010 년

덜 그렇습니다! 나는 그것을 좋아한다.
Bartłomiej Zalewski 2014 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.