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>

- Kate

Answer 1

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

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

Here you can see the SASS generated CSS in action. NOTE: The position in the DOM for "the icon" has been moved.

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

- Thomas Wikman

---

那么我想知道预期的CSS应该是什么样子。 如果您不想要input + .input-group-addon，而是想要input.input-group-addon，则需要删除+和一个空格，这样它就变成了&.input-group-addon。 - Thomas Wikman

我猜我不擅长描述我的需求。我有一个输入字段和旁边的图标。当我聚焦在输入框上时，它会被蓝色下划线标记，但是图标仍然被灰色下划线标记，而我希望它也是蓝色的。这样说清楚了吗？ - Kate

我修改了它，尝试了一下。对于那个粗糙的第一个答案感到抱歉。我专注于语法，而不是预期的结果（背景中有尖叫的幼儿会让我注意力不集中） :) - Thomas Wikman

没关系，你是想要帮忙 :) - Kate

孩子们正在睡觉。答案已经检查了两遍。 :) 包含由SASS生成的CSS，可以通过“运行代码片段”查看。 - Thomas Wikman