CSS 포커스입니다. 레이블 필드를 변경할 수 없습니다.

Question

필드의 초점을 텍스트의 색으로 변경하려고 시도했지만 무엇이든지 시도합니다. 작동하지 않습니다. 다음은 HTML은 다음과 같습니다

.register-section input:focus + .register-section label[for=signup_username] { 
 
    color: #ffffff !important; 
 
}

<div class="register-section" id="basic-details-section"> 
 
<h4>Account Details</h4> 
 
<label for="signup_username">Username (required)</label> 
 
<input type="text" name="signup_username" id="signup_username" value="" /> 
 
</div>

사람이 내가 잘못 뭘하는지 말해 줄래? 미리 감사드립니다.

Answer 1

adjacency 연산자는 다음에 오는 CSS 노드를 선택할 때만 사용할 수 있습니다 (CSS 선택자는이 방향으로 만 해결할 수 있음). 따라서 귀하의 레이블이 이고 귀하의 입력이 인 HTML이기 때문에 CSS를 사용하여 입력 상태를 :focus (으)로 선택할 수 없습니다.

이 문제를 해결하려면, 당신은 선택한 다음, 자신의 표시 순서를 변경하려면 요소의 순서를 반대로 당신의 HTML을 변경하고 CSS를 조정하기 위해 적절한해야합니다

.register-section label[for=signup_username] { 
 
    float: left; 
 
} 
 
.register-section input:focus + label[for=signup_username] { 
 
    color: #ffffff !important; 
 
}

<div class="register-section" id="basic-details-section"> 
 
    <h4>Account Details</h4> 
 
    <input type="text" name="signup_username" id="signup_username" value="" /> 
 
    <label for="signup_username">Username (required)</label> 
 
</div>

Answer 2

jQuery를 사용하여 동일한 결과를 얻으려는 사람들을위한 대안으로 입력 필드의 focus 및 blur 이벤트를 대상으로 라벨의 색상을 변경하십시오.

$('#signup_username').on('focus blur', function(e){ 
    var label = $("label[for=signup_username]"); 
    if (e.type == 'focus'){ 
     label.css('color','#FFF'); 
    } 
    else { 
     label.css('color','#000');  
    } 
}); 

JSFiddle