我正在尝试更改div中元素的颜色。正如您所看到的，在下面的代码中，我尝试更改“I”类，以便在聚焦输入字段时，侧图标（来自字体awesome）以道奇蓝色突出显示。

*: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;
}

<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>