programing

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

abcjava 2023. 7. 30. 16:47
반응형

속성 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]내가 의미하는 바는 형식 특성이 지정되지 않은 모든 입력 상자를 선택하고 싶다는 것입니다(기본값이 텍스트이기 때문에).input[type='text']일치하지 않음).안타깝게도 CSS3 스펙에는 제가 찾을 수 있는 셀렉터가 없습니다.

이것을 달성할 방법을 아는 사람이 있습니까?

:not선택기:

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를 사용하여 수행할 수 있습니다.

여기에 추가하고 싶었을 뿐입니다. :not selector in old.selectivizr을 사용한 IE: http://selectivizr.com/

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

반응형