<input>의 상태를 기준으로 <label> 스타일을 지정하십시오.

Question

입력 상태에 따라 HTML 레이블의 스타일을 지정할 수 있습니까?

제 경우에는 체크 여부에 따라 <input type="checkbox"> 스타일을 지정하고 싶습니다.

입력 소스에 라벨을 넣으려고했으나 입력 소스에 중첩되어 있어도 Firefox와 Chrome (최소한)은 형제로 파싱 된 것처럼 보입니다. 그리고 for = 속성을 통해 간접적으로 사용할 수있는 CSS 규칙을 작성하는 방법을 모르겠습니다.

이 자바 스크립트를 채찍질해야하나요?

Answer 1

중첩 될 필요가 없습니다. 즉, 레이블 > 요소의 "for"속성입니다.

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label> 

: 최신 브라우저에서

(CSS 2.1을 지원하는 것), 당신은

input + label { 
    /* rules */ 
} 

당신은 같은 엄격한 형제 관계에있는 마크 업을해야 할 것이다

으로, 형제 선택기를 사용할 수 있습니다 인접한/형제 선택 플러스 속성 선택기를 사용

Answer 2

는 작동 할 것 :

<form> 
    <style> 
    INPUT[checked=checked] + LABEL { 
     color: #f00;  
    } 
    </style> 
    <div> 
     <input type="checkbox" id="chk1" /> 
     <label for="chk1">Label #1</label> 
    </div> 
    <div> 
     <input type="checkbox" id="chk2" checked="checked" /> 
     <label for="chk2">Label #2</label> 
    </div> 
</form>