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>

焦点选择器在Sass中

1 个答案: