IT

속성 x가없는 요소와 일치하는 CSS 선택기

lottoking 2020. 3. 18. 23:19
반응형

속성 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 속성이 지정되지 않은 모든 입력 상자를 선택하고 싶습니다 (기본값은 텍스트이지만 input[type='text']일치하지 않기 때문입니다). 불행히도, 내가 찾을 수있는 CSS3 사양에는 그러한 선택기가 없습니다.

누구든지 이것을 달성하는 방법을 알고 있습니까?


: 선택기 아님

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

지원 : Internet Explorer 9 이상에서


더 많은 브라우저 간 솔루션을 위해 입력되지 않은 텍스트, 암호를 원하는 방식으로 모든 입력의 스타일을 지정하고 라디오, 확인란 등의 스타일을 재정의하는 다른 스타일을 지정할 수 있습니다 .

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로 수행 할 수 있습니다.


여기에 추가하고 싶을 때 selectivizr을 사용하여 oldIE에서 : not 선택기를 가질 수 있습니다 : http://selectivizr.com/

참고 URL : https://stackoverflow.com/questions/1533444/css-selector-to-match-an-element-without-attribute-x

반응형