更改输入焦点上的FA SVG图标颜色

Question

当输入为foucs时，我想更改fa-svg图标的颜色。 我正在使用MDB。 MDB

我的HTML代码如下：

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

我尝试了以下CSS：

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

但这对我不起作用。

看起来像这样。

因此，当输入被聚焦时，我希望图标颜色更改该怎么做？

Answer 1

它不起作用，因为+是直接在第一个元素之后的兄弟选择器，在这种情况下，第一个元素是输入的。我的建议是使用JavaScript，或者也许您可以在父元素上进行操作，例如如果md-form具有is-focused类，则不给图标重新着色。希望这会有所帮助！

编辑

为输入添加onclick函数

Javascript / jQuery

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

CSS

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