当输入字段为焦点输入字段来自另一个div时如何更改图标颜色 - HTML - CSS答案

【问题标题】：How to change icon color when input field is focus input field is from another div - HTML - CSS当输入字段为焦点输入字段来自另一个div时如何更改图标颜色 - HTML - CSS
【发布时间】：2019-02-03 23:40:20
【问题描述】：

当输入块成为焦点并填充文本时，我想更改占位符和图标颜色。

添加带有图标和占位符的输入字段，当它没有像代码中那样获得焦点时显示颜色。
输入焦点时更改图标和占位符颜色。一个。这适用于占位符。 b.不适用于图标。在这里需要帮助

这里是代码链接 - https://www.w3schools.com/code/tryit.asp?filename=FZTM5JKXA5D2

我尝试了这个，但不起作用

 .inputBlock input:focus i {
      z-index: 1;
      position: absolute;
      color: #ffffff;
      left: 4px;
      top: 17px;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>


    .inputBlock {
      margin: 10px 0;
      width: 600px;
      position: relative;
    }

    .inputBlock input {
      padding: 17px 25px;
      font-size: 14px;
      border-radius: 2px;
      cursor: pointer;
    }

    .inputBlock i {
      z-index: 1;
      position: absolute;
      color: #0082D4;
      left: 4px;
      top: 17px;
    }

    .inputBlock input:focus i {
      z-index: 1;
      position: absolute;
      color: #ffffff;
      left: 4px;
      top: 17px;
    }

    .inputBlock input::-moz-placeholder {
      color: #0082D4;
    }

    .inputBlock input::-webkit-input-placeholder {
      color: #0082D4;
    }

    .inputBlock input:focus::-moz-placeholder  {
      color: #8B9DA7;
      border-color: #0082D4;
    }

    .inputBlock input:focus::-webkit-input-placeholder {
      color: #8B9DA7;
      border-color: #0082D4;
    }
    </style>
    </head>
    <body>
    <div class="inputBlock"><div>
    <input type="text" placeholder="Add input"> </input></div>
    <i class="fa fa-car"> </i>
    </div>



    </body>

    </html>

【问题讨论】：

请再次检查。这段代码我错过了添加另一个 div 用于输入。 'w3schools.com/code/tryit.asp?filename=FZTMTKSSDXFE

标签： html css sass

【解决方案1】：

input:focus + .fa.fa-car {
	color: red;
}

【讨论】：

不工作，因为这个输入块来自另一个 div

【解决方案2】：

问题出在你的 CSS 选择器上：

.inputBlock input:focus i {

这会选择一个 i 元素inside 一个焦点输入inside inputBlock-div。您的<i> 是输入的兄弟，而不是后代，因此您需要像这样使用adjacent sibling selector 或general sibling selector：

.inputBlock input:focus + i {

希望这会有所帮助！

【讨论】：

我如何从这个
你不能。 CSS（目前）不允许这样的选择，您将被限制为 JavaScript/jQuery/... 解决方案，就像@Lukas 在他的回答中显示的那样。如果你想单独使用 CSS，你必须将 <I> inside inputClass-
.

【解决方案3】：

你可以在 jQuery 中轻松做到这一点：

$(document).ready(function() {
    $("input").focus(function() {
        $(".fa-car").css("color", "red");
    }).blur(function() {
        $(".fa-car").css("color", "#0082D4");
    });
});

【讨论】：