我专注于输入字段,需要更改该类的图标和边框底部的颜色。我如何在 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>
最佳答案
尝试这个。
编辑:我错过了一个 .当我粘贴答案时。
.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>
关于css - Sass 中的焦点选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44229482/