Have you ever wanted to modify the color of fa-svg icons when the input field is focused? If you are using MDB (Material Design for Bootstrap), then achieving this customization is quite possible.
Check out the HTML code snippet below:
<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>
One approach you might have tried involves using CSS, like so:
input:focus + .fa {
color: #4285f4;
}
If this method didn't provide the desired outcome for you, consider exploring alternative solutions. The goal is to have the fa-icon change color when the input field is in focus mode.
To get a better idea of how it should look, refer to the image linked here: https://i.sstatic.net/VpXoo.png
If you're wondering how to go about implementing this color change feature successfully, consult the reference illustration shown with the icon updated upon input focus: https://i.sstatic.net/LxRYw.png