Sass 中的焦点选择器

Question

我专注于输入字段，需要更改图标的颜色和该图标的底部边框 class。我如何在 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 正在运行。 注意： "the icon" 在 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>

Sass 中的焦点选择器

Focus selector in Sass

css

focus

input

sass

selector