css - Sass 中的焦点选择器

Question

我专注于输入字段，需要更改该类的图标和边框底部的颜色。我如何在 Sass 中做到这一点？我已经尝试过:

input
 + .input-group-addon // this is icon class
   &:focus
    border-bottom: solid 2px #004eff

然而它什么都不做。请你帮助我好吗？这就是 HTML 的样子。

<div class="form-group" class="col-md-offset-1 col-xl-offset-1  focus-icon">
      <div class="input-group">
        <div class="input-group-addon man-icon"></div>
        <input type="email" placeholder="Логин"  required>
      </div>
    </div>

Answer 1

尝试这个。
编辑:我错过了一个 .当我粘贴答案时。

.input-group
  input
    &:focus
      & + .input-group-addon
        border-bottom: solid 2px #004eff

在这里您可以看到正在运行的 SASS 生成的 CSS。
注意: “图标”在 DOM 中的位置已移动。

.input-group input:focus+.input-group-addon {
  border-bottom: solid 2px #004eff;
}

<div class="form-group" class="col-md-offset-1 col-xl-offset-1  focus-icon">
  <div class="input-group">

    <input type="email" placeholder="Логин" required>
    <div class="input-group-addon man-icon"></div>
  </div>
</div>