Change FA SVG icon color on input focus

Question

I want to change the colour of fa-svg icons when the input is foucs. I am using MDB. MDB

My HTML code is as follows :

<div class="col-md-6">

        <div class="md-form">
          <i class="fa fa-user prefix active"></i>
            <?php echo form_input('display_name', set_value('display_name', $user->display_name),'class="form-control" id="Display Name" required'); ?>
          <label for="Display Name">Display Name</label>

        </div>

</div>

I tried the following CSS :

input:focus + .fa {
    color: #4285f4;
}

But this did not work for me.

It looks something like this.

So when the input is focused I want the fa-icon color to change how do I do that ?

Answer 1

it doesn't work because + is a sibling selector that directly follows first element, in this case first element is input. My suggestion is to use javascript, or maybe you can work on the parent element to do that, e.g. when md-form has is-focused class than recolor the icon. Hope this helps!

EDIT

add onclick function for the input something like this

Javascript / jQuery

$('#Display_Name_input').on('focus', function(){
   $(this).parent().addClass('is-focused');
});

CSS

.md-form.is-focused .fa {
   color: #4285f4;
}