Как изменить цвет иконки, когда поле ввода находится в фокусе, поле ввода от другого div - HTML - CSS - PullRequest
Новая
       20

Как изменить цвет иконки, когда поле ввода находится в фокусе, поле ввода от другого div - HTML - CSS

0 голосов
/ 03 февраля 2019

Я хочу изменить местозаполнитель и цвет значка, когда входной блок находится в фокусе и заполнен текстом.

  1. добавить поле ввода со значком и заполнителем, который показывает цвет, когда он не в фокусе, как в коде.
  2. изменить значок и цвет заполнителя при фокусировке ввода.а.Это работает для заполнителя.не работает для значка.НУЖНА ПОМОЩЬ ЗДЕСЬ

Вот кодовая ссылка - 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>

Ответы [ 3 ]

0 голосов
/ 03 февраля 2019

проблема в вашем селекторе css: 

.inputBlock input:focus i {

Это выбирает элемент i внутри сфокусированный вход внутри inputBlock-div.Ваш <i> является родственным входом, а не потомком, поэтому вам необходимо использовать либо соседний селектор брата , либо общий селектор брата , например: 

.inputBlock input:focus + i {

Надеюсь, это поможет!

0 голосов
/ 03 февраля 2019

Вы можете легко сделать это в jQuery: 

$(document).ready(function() {
    $("input").focus(function() {
        $(".fa-car").css("color", "red");
    }).blur(function() {
        $(".fa-car").css("color", "#0082D4");
    });
});
0 голосов
/ 03 февраля 2019 

input:focus + .fa.fa-car {
	color: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...