javascript - Tokenfield 不适用于 Bootstrap “has-error” 类

Question

我在使用 token 字段和 Bootstrap “has-error”类时遇到问题。如果输入有没有标记字段的“has-error”类，那么它周围会很好地显示一个红色边框。当我添加 token 字段时，它不是。我该怎么做才能让“has-error”在带有 token 字段的输入标签周围显示红色边框？

jsfiddle:https://jsfiddle.net/o1167a3t/2/

代码:

<div class="form-group has-error">
    <input id="x" class="form-control" type="text" />
</div>
// include next line to see that red border dissapears
//new Tokenfield({el: document.querySelector('#x')});

Answer 1

Bootstrap 的红色边框规则选择器是:.has-error .form-control . Tokenfield 覆盖.has-error里面的元素和 .form-control丢失了。

您可以通过将原始的 Bootstrap CSS 规则复制到新的 CSS 文件来适应这一点，<style>等，但考虑到新的类和结构:

.has-error .tokenfield {
    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);
}

JSFiddle:https://jsfiddle.net/yuriy636/9o5q2rxu/