更改输入焦点上的 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;
}

但这对我不起作用。

看起来像这样。

所以当输入聚焦时，我希望 fa-icon 颜色改变我该怎么做？

Answer 1

它不起作用，因为 + 是直接跟随第一个元素的兄弟选择器，在这种情况下，第一个元素是输入。我的建议是使用 javascript，或者您可以使用父元素来执行此操作，例如当 md-form 具有重点类而不是重新着色图标时。希望这会有所帮助！

编辑

为类似这样的输入添加 onclick 函数

Javascript / jQuery

​​>

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

CSS

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