Tokenfield不支持bootstrap“has-error”类 [英] Tokenfield does not work with bootstrap “has-error” class

问题描述

我有令牌麻烦和bootstrapshas-error类有问题。如果一个输入有没有令牌字段的有错误类，那么红色边框将在其周围显示出来。当我添加令牌字段时，它不是。我能做些什么，以便has-error会在带有tokenfield的输入标记周围显示红色边框？

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

code：

 < div class =form-group has-error> 
< input id =xclass =form-controltype =text/> 
< / div> 
 //包括下一行以查看红色边框消失
 //新Tokenfield（{el：document.querySelector（'＃x'）}）; 
  

解决方案

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

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

  .has-error .tokenfield {
边框颜色：＃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/

Im having trouble with tokenfield and bootstraps "has-error" class. If an input has "has-error" class without tokenfield then a red border is niceley displayed around it. When i add the tokenfield then it is not. What can i do so that "has-error" will display a red border around input tag with tokenfield?

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

code:

<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')});

解决方案

Bootstrap's rule selector for the red border is: .has-error .form-control. Tokenfield overwrites the elements inside .has-error and .form-control is lost.

You can adapt to this, by duplicating the original Bootstrap CSS rule to a new CSS file, <style>, etc. , but taking into account the new classes and structure:

.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/

这篇关于Tokenfield不支持bootstrap“has-error”类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！