<입력 유형 =“?”에 대한 CSS 선택기


105

유형에 따라 모든 입력을 대상으로하는 CSS를 사용할 수있는 방법이 있습니까? 다양한 비활성화 된 양식 요소에 사용하는 비활성화 된 클래스가 있으며 텍스트 상자의 배경색을 설정하고 있지만 확인란이 해당 색상을 얻지 않도록합니다.

별도의 클래스로 이것을 할 수 있다는 것을 알고 있지만 가능하면 CSS를 사용하고 싶습니다. 나는 이것을 자바 스크립트로 설정할 수 있지만 CSS를 다시 찾을 수 있다고 확신합니다.

IE7 +를 목표로하고 있습니다. 그래서 CSS3를 사용할 수 없다고 생각합니다.

편집하다

CSS3를 사용하면 다음과 같은 일을 할 수 있습니까?

INPUT[type='text']:disabled 내 수업을 모두 없애는 것이 더 좋을 것입니다 ...

편집하다

도움을 주셔서 감사합니다! 그래서 여기에 클래스를 설정하지 않고 비활성화 된 모든 텍스트 상자와 영역을 수정하는 선택기가 있습니다.이 질문을 시작했을 때 저는 이것이 가능하다고 생각하지 못했습니다.

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

이것은 IE7에서 작동합니다.


2
CSS 속성 선택기에 대한 자세한 정보 가 포함 된 기사 를 작성 했습니다 .
Sarfraz

답변:


155

예. IE7 +는 속성 선택기를 지원합니다.

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

특정 값과 같거나, 시작하거나, 포함하거나, 끝나는 값을 포함하는 속성 유형의 요소 입력입니다.

기타 안전한 (IE7 +) 선택기는 다음과 같습니다.

  • 부모> 자녀 : p > span { font-weight: bold; }
  • 다음에 ~ 요소가 붙습니다. span ~ span { color: blue; }

<p><span/><span/></p>효과적으로 다음을 제공합니다.

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

추가 정보 : quirksmode.com의 브라우저 CSS 호환성

나는 다른 사람들이 그것을 할 수 없다고 생각하는 것에 놀랐다. CSS 속성 선택기는 이미 한동안 여기에있었습니다. .css 파일을 정리할 때가 된 것 같습니다.


좋아, 나는 이것을 시도했지만 지금은 작동하지 않았으므로 내 구문을 엉망으로 만들어야합니다.
JoshBerke

오늘은 진짜 너 덕분이다! 이제 당신은 내 주는 식 hehe에 :-) j는 /이 케이 사용하지 않고 IE6에서 할 수 말해 만들고 싶어
JoshBerke

13
불행히도 할 수 없습니다. 나는 종교적 관점에서 IE6 지원을 중단하고 우리 모두도 그렇게 할 것을 제안합니다. 오늘 저는 IE 조건부 주석을 사용하여 사용자에게 자신의 컴퓨터와 개인 정보가 IE6를 사용할 위험에 처해 있으며 즉시 업그레이드해야한다고 말합니다. P
Filip Dupanović

1
나는 IE6를 지원하는 데 너무 익숙하다고 생각합니다. IE7에서도 작동하지 않을 것이라고 생각했습니다.
TJ L

4
IE6 지원을 중단하고 싶지만 할 수없고 제안한대로 할 수 없습니다 ...하지만 정말 정말 할 수 있기를 바랍니다
JoshBerke

3

슬프게도 다른 포스터는 걸 올바른 크론에 의해 수정 된대로 실제로, ... 당신은 당신의 IE7과 엄격한 문서로 확인하지만, 우리 대부분 IE6 요구 사항은 JS 또는 이것에 대한 클래스 참조로 감소하지만 입니다 IE ^ h ^ h 브라우저에서 충분한 지원이없는 CSS2 속성입니다.

완전성에서 유형 선택기는 xpath와 유사한 형식 [attribute=value]이지만 많은 흥미로운 변형이 존재합니다. 그것은 것입니다 그것의 가능한, 좋은 일이 IE8에 대한 당신의 머리에 유지하는 경우에 매우 강력합니다.


업데이트 된 브라우저 지원 참조가 있습니까? 그것은 IE7 베타를 기반으로 IE8을보고 싶어합니다
JoshBerke

IE8은 아직 베타 버전이지만 quirksmode는 "예"라고 표시됩니다. quirksmode.org/css/contents.html
annakata

나는 여전히 IE6를 지원하고 있지만 약간의 시각적 조정이 추가되지 않았습니다.
JoshBerke

공평하게, 제목에 따라 대답하는 것은 실수였습니다. 저는 일반적인 경우에 대답하는 경향이 있습니다. 질문을 더 읽어야합니다. :)
annakata

1

jQuery로이 작업을 수행 할 수 있습니다. 선택기를 사용하여 유형과 같은 속성별로 선택할 수 있습니다. 그러나 이렇게하려면 사용자가 자바 스크립트를 켜고 다운로드 할 추가 파일이 있어야하지만 작동한다면 ...


0

죄송합니다. 짧은 대답은 아니오입니다. CSS (2.1)는 속성이 아닌 DOM의 요소 만 마크 업합니다. 각 입력에 특정 클래스를 적용해야합니다.

그게 엄청나게 유용 할 것이기 때문입니다.

JavaScript보다 CSS를 선호한다고 말씀 하셨지만 여전히 jQuery 사용을 고려해야합니다. 속성을 기반으로 DOM 요소에 스타일을 추가하는 매우 깔끔하고 우아한 방법을 제공합니다.


jquery는이를 수행하는 방법이거나 일반적인 JavaScript입니다
TravisO

4
Afaict,이 답변은 올바르지 않습니다 (CSS 2.1 부분) : w3.org/TR/CSS21/selector.html#attribute-selectors . 그렇지 않은 경우 답변을 명확히하십시오.
CIC

1
죄송합니다. 당신 말이 맞습니다. 개발자가 여전히 동시에 IE6을 지원해야하기 때문에 IE7에서 최소한의 효과를 기대합니다. 질문을 좀 더주의 깊게 읽고 숙제를 했어야 했어요.
Phil.Wheeler
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.