Изменить цвет значка шрифта Awesome при нажатии ввода - PullRequest
Новая
       12

Изменить цвет значка шрифта Awesome при нажатии ввода

0 голосов
/ 06 мая 2018

Я хочу изменить цвет значка шрифта в полях ввода при их нажатии. Пока что мне удалось изменить цвет рамки ввода только при нажатии, но я не могу понять, как изменить значок. Не уверен, почему input:focus i не работает. Я тоже пробовал input:focus .fa и ничего. Любые предложения будут оценены, спасибо! 

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

#signInForm .input-icons {
    position: relative;
    display: inline-block;
}

#signInForm .input-icons input {
    width: 300px;
    font-size: .9rem;
    text-indent: 20px;
    padding: .1rem;
    border: 0;
    border-bottom: solid 2px #999;
    background-color: transparent;
}

#signInForm .input-icons i {
    color: #999;
    position: absolute;
    top: .15rem;
    left: .3rem;
}

#signInForm .input-icons input:focus {
    border-color: #00aef0;
}

#signInForm .input-icons input:focus i {
    color: #00aef0;
}
<!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
    
<div id="signInForm">
  <form>
    <div class="input-icons">
      <i class="fas fa-user"></i>
      <input type="text" placeholder="Name" required>
    </div>
    <div class="input-icons">
      <i class="fas fa-lock"></i>
      <input type="password" placeholder="Password" required>
    </div>
  </form>
</div>

1 Ответ

0 голосов
/ 06 мая 2018

Поскольку ваш элемент имеет position:absolute, а предыдущий селектор отсутствует, вы можете изменить значок, чтобы сделать его после ввода и использовать селектор + : 

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

#signInForm .input-icons {
    position: relative;
    display: inline-block;
}

#signInForm .input-icons input {
    width: 300px;
    font-size: .9rem;
    text-indent: 20px;
    padding: .1rem;
    border: 0;
    border-bottom: solid 2px #999;
    background-color: transparent;
}

#signInForm .input-icons i {
    color: #999;
    position: absolute;
    top: .15rem;
    left: .3rem;
}

#signInForm .input-icons input:focus {
    border-color: #00aef0;
}

#signInForm .input-icons input:focus + i {
    color: #00aef0;
}
<!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
    
<div id="signInForm">
  <form>
    <div class="input-icons">
      <input type="text" placeholder="Name" required>
      <i class="fas fa-user"></i>
    </div>
    <div class="input-icons">
      <input type="password" placeholder="Password" required>
      <i class="fas fa-lock"></i>
    </div>
  </form>
</div>
...