Question

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

添加带有图标和占位符的输入字段，当其未像代码中那样聚焦时显示颜色。
输入焦点时更改图标和占位符颜色。一种。这适用于占位符。 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>

Answer 1

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

Answer 2

问题出在您的CSS选择器中：

.inputBlock input:focus i {

这将在inputBlock-div中选择i元素 inside 中的焦点输入 inside 。您的<i>是输入的同级，而不是后代，因此您需要像这样使用adjacent sibling selector或general sibling selector：

.inputBlock input:focus + i {

希望这会有所帮助！

Answer 3

您可以在jQuery中轻松完成此操作：

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

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

3 个答案: