CSS On Focus First Child Change Color Of Second Child?

Question

This is My Html Code.

<div class="form-group has-feedback">
  <input type="text" class="form-control" id="inputSuccess2" name="s" placeholder="Search">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Now This is My CSS.

input[type='text']:focus{
    color:#CD4C37;
}

I want to change color of only glyphicon not input text.

How can i change color of icon on focus textbox?

Answer 1

input[type='text']:focus + span.glyphicon-ok {
    color:#CD4C37;
}

Answer 2

A more general solution would look something like this:

 .form-group >:first-child:focus + span.glyphicon-ok { color:#CD4C37; }

 <div class="form-group has-feedback"> <input type="text" class="form-control" id="inputSuccess2" name="s" placeholder="Search"> <span class="glyphicon glyphicon-ok form-control-feedback">Input is focused</span> </div>

That way it can work for other elements such as <button />

 .form-group >:first-child:focus + span.glyphicon-ok { color:#CD4C37; }

 <div class="form-group has-feedback"> <button>I'm a button</button> <span class="glyphicon glyphicon-ok form-control-feedback">Input is focused</span> </div>

or even <p /> (Note: you'll need to provide tabindex=-1 , more info here ).

 .form-group >:first-child:focus + span.glyphicon-ok { color:#CD4C37; }

 <div class="form-group has-feedback"> <p tabindex="-1">I'm a paragraph</p> <span class="glyphicon glyphicon-ok form-control-feedback">Input is focused</span> </div>