css를 사용하여 입력을 집중시킬 때 LI를 활성화 상태로 만듭니다.

Question

입력 필드가 CSS만을 사용하여 초점을 맞출 때 <li>에 활성 상태를 만들 수있는 방법이 있습니까? 그렇지 않다면, 이것을 달성하는 최선의 방법에 대한 제안이 있습니까?

라이브 데모보기 http://jsfiddle.net/W5LzP/

이 예제에서 사용자가 입력 필드를 클릭하면 LI의 배경색이 노란색으로 유지됩니다.

예

예 CSS :

ol li label{ 
    display:block; 
} 

ol li{ 
    margin-bottom:8px; 
    background-color:#CCC; 
} 

ol li:hover{ 
    background-color:#090; 
} 

ol li:active{ 
    background-color:#FF9; 
} 

ol li input:focus{ 
    border:1px solid #99C; 
    background-color:#99F; 
} 

Answer 1

CSS는 하위 항목 만 선택할 수 있으며 조상은 선택할 수 없습니다 (아마 아웃 라인을 작성한 이유 일 수 있음).

JavaScript를 사용해야하는 경우 parentNode 속성을 확인하십시오.

var inputs = document.getElementsByTagName('input'); 

for (var i = 0, inputsLength = inputs.length; i < inputsLength; i++) { 

    inputs[i].onfocus = function() { 
     this.parentNode.className += 'active'; 
    } 

    inputs[i].onblur = function() { 
     this.parentNode.className = this.parentNode.className.replace(/\bactive\b/, ''); 
    } 

} 

jsFiddle.

Answer 2

불행히도 CSS를 부모 선택기를 지원하지 않습니다. 그래서 할 수있는 유일한 방법은 jQuery와 같은 자바 스크립트를 사용하는 것입니다. parent method.