使用 Bootstrap 的输入错误 CSS 的所有属性

Question

我希望我的输入与 Bootstrap 的错误样式相同。这个类应该从引导程序扩展什么来做到这一点？包括 :focus 的样式，它是红色发光而不是默认的蓝色发光。

.ng-invalid.ng-touched.ng-dirty:not(form) {
    // extend bootstrap style?
}

我使用了.has-error，这只有在树的更上方有一个带有类 .has-error 的元素对我来说没有意义时才有效。所以这行得通：

.ng-invalid.ng-touched.ng-dirty:not(form) {
    @extend .has-error;
}

HTML

<div class="form-group has-error">
    ..
    <input type="text" class="form-control" required> 
</div>

如何通过仅将 .has-error 应用于输入而不放置上层元素来使其工作。

Answer 1

实际上，你不能。此类不仅用于输入，还用于标签。这就是 .has-error 与 .form-group 一起使用的原因。

Same question 是你的。

您可以创建新类并将样式直接添加到您的输入中：

.some-class:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}
.some-class {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}