[selector] CSS - :indeterminate 가상선택자 - 불확정요소 선택 (= :indeterminate선택자 = 인디터미닛 선택자)

목차

1. :indeterminate 예제 - 불확정 input 요소에 빨간 그림자 추가
2. :indeterminate 정의
3. :indeterminate 구문

:indeterminate 예제 - 불확정 input 요소에 빨간 그림자 추가

 

<style> 

input:indeterminate {

  box-shadow: 0 0 1px 1px red;

}

</style>

<input type="checkbox" id="hz">홈짱닷컴 Homzzang.com

<script>

// JS 통해서 checkbox를 indeterminate 상태로 만들기

var hz = document.getElementById("hz");

hz.indeterminate = true;

</script>

 

결과보기

:indeterminate 정의

 

불확정 상태에 있는 폼 요소 선택.

 

---

 

1.

아래 요소에 대해서만 적용 가능.

• <input type="checkbox">
• <input type="radio">
• <progress>

  

2.

checkbox 경우, HTML으로 indeterminate 상태 될 수 없음.

indeterminate 상태는 checkbox 객체의 속성으로, JS로만 true 설정 가능.

 

radio 경우, 폼의 동일명 갖는 모든 radio 버튼이 비체크 상태일 때, indeterminate 상태가 됨.

 

4.

CSS버전: CSS3

 

5. ★

IE9 이상 주요 최신 브라우저 지원. (IE 경우 부분 지원)

단,

<input type="radio"> 요소 경우, IE는 지원 X
<progress> 요소 경우, IE10 이상 주요 최신 브라우저 지원.

 

6.

MDN :indeterminate 예제 보기

 

:indeterminate 구문

 

지정선택자:indeterminate {

  css 선언;

}