CODEWITHSUNDEEP
cssfocusfield
Hiltjo van Dam
Hiltjo van Dam

Reputation: 1

CSS focus. Can't get it to change a label field

I am trying to get a focus on a field change the color of a text, but whatever I try: it is not working. Below is the 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>

Can anyone tell me what I'm doing wrong? Thanks in advance!

Upvotes: 0

Views: 147

Answers (2)

PTD
PTD

Reputation: 1053

An alternative for those who wish to achieve the same result using jQuery, target the focus and blur events of the input field to change the color of the label:

$('#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');    
    }
});

See JSFiddle

Upvotes: 0

SW4
SW4

Reputation: 71230

The + adjacency operator can only be used to select DOM nodes following the initial selector (CSS selectors can only resolve in this direction). As such, because your label is before your input in your html, you cannot select it on the :focus state of the input using CSS.

To fix this, you will need to change your HTML to reverse the order of the elements, and adjust your CSS to change their display order, then select as appropriate:

.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>

Upvotes: 1

Related Questions