如何改变div内部元素的颜色（css）

Question

我试图改变div中元素的颜色。如您所见，在下面的代码中，我试图改变＆＃34; i＆＃34; class，这样当输入字段被聚焦时，侧面图标（来自font-awesome）会在颜色道奇蓝色中突出显示。

＆＃13;

＆＃13;

*:focus {
  outline: none;
}

 ::placeholder {
  color: #696969;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ced4da;
  font-family: sans-serif;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.email-input-field,
.password-input-field {
  position: relative;
}

input:focus+i {
  color: dodgerblue;
}

.email-input-field i {
  position: absolute;
  padding: 9px 8px;
  color: darkgrey;
  transition: 0.3s;
}

.password-input-field i {
  position: absolute;
  top: 1px;
  padding: 9px 12px;
  color: darkgrey;
  transition: 0.3s;
}

input[type="email"],
input[type="password"] {
  width: 210px;
  height: 28px;
  margin-bottom: 7px;
  padding-left: 50px;
}

input[type="submit"] {
  border: none;
  width: 267px;
  height: 28px;
  color: white;
  background-color: #42BB97;
}

input[type="submit"]:hover {
  background-color: #3BA384;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div classs="login-form">
  <form action="Login.php" method="POST">
    <div class="wrapper">
      <div class="email-input-field">
        <i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
        <input type="email" name="emailPost" placeholder="Email" required>
      </div>
      <div class="password-input-field">
        <i class="fa fa-lock fa-lg" aria-hidden="true"></i>
        <input type="password" name="passwordPost" placeholder="Password" required>
      </div>
      <div class="submit-button">
        <input type="submit" name="submit" value="Login">
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

+是一个兄弟选择器，用于选择当前元素旁边的任何元素。因此，当您使用它时，它不会转到<i>的前一个元素。您需要更改HTML结构，以便<i>位于<input>之后。

<div class="email-input-field">
  <input type="email" name="emailPost" placeholder="Email" required>
  <i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class="password-input-field">
  <input type="password" name="passwordPost" placeholder="Password" required>
  <i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>

我将<i>的位置更改为<input>之后的位置，并将光标置于密码字段内，这对我有效。

另外，不要忘记提供以下CSS。

.email-input-field i {
  position: absolute;
  padding: 9px 8px;
  color: darkgrey;
  transition: 0.3s;
  left: 0;
  top: 0;
}

缺少left和top属性。