html - 如何更改div(css)内元素的颜色

Question

我正在尝试更改 div 中元素的颜色。如您所见，在下面的代码中，我尝试更改“i”类，以便在输入字段聚焦时，侧面图标(来自 font-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>

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缺少属性。