Kann nicht ändern Icons Farbe nach der Fokussierung Div

Question

Ich bin ziemlich "Neuling" auf CSS und versuchen, die Farbe von FontAwesome Symbol zu ändern, wenn das Hauptdiv konzentriert ist. Ich habe mehrere Methoden ausprobiert, versucht, seine Farbe mit div id oder class auf Fokus ändern, aber keiner arbeitete.

Ich habe auch versucht active und hover Zustand nur zu testen, keiner arbeitete auch.

HTML

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group"> 
    <label for="username" class="..">User Field <span class="..">*</span></label> 
    <div id="test" class="has-feedback"> 
     <input type="text" class="form-control" id="username" vk_1e5ee="subscribed"> 
     <span class="fa fa-user form-control-feedback" aria-hidden="true"></span> 
    </div> 
</div> 

CSS

.form-control-feedback { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 2; 
    display: block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
    pointer-events: none; 
} 

.form-control:focus .form-control-feedback:focus { 
    color:red; 
} 

/* 
#test:focus span .fa { 
    color:red; 
}*/ 

JSFiddle-Link:http://jsfiddle.net/xh8wsr5g/2/

ich die Farbe des Haupt div wenn fokussiert ändern kann, aber das Symbol nicht ändern können. Was würdest du mir vorschlagen? Danke im Voraus.

Answer 1

Sie müssen nur die Geschwister-Selektor.

Ihre font-awesome Spanne so ein Geschwister von Textbox ist eine folgende ist nicht funktionieren

.form-control:focus { 
    color:red; 
} 

Statt es Sie folgenden Code

.form-control:focus + .form-control-feedback { 
    color:red; 
} 

Siehe Geige hier verwenden: http://jsfiddle.net/xh8wsr5g/1/

Also, wenn die Textbox im Fokus ist, wird die font-awesome Spanfarbe rot sein.

Siehe diesen Link für imformation über https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

Sie können dies nicht mit css allein erreichen, .form-control-feedback ist kein Kind von .form-control. Daher wird es kein Element durch .form-control:focus .form-control-feedback:focus zugänglich sein, versuchen Sie jquery mit der Farbe zu ändern:

$('.form-control').focus(function(){ 
    $('.form-control-feedback').css('color','red'); 
}); 

Answer 3

fügen Sie einfach diesen Code Selektor Geschwister:

// to make the text color change 
.form-control:focus { 
    color:red; 
} 

// to make the icon color change 
.form-control:focus + .form-control-feedback { 
    color:red; 
} 

Sie dieses http://jsfiddle.net/xh8wsr5g/3/