在 jQuery 中使用 tagsinput 库时如何删除输入标签内的边框？

Question

在jQuery中使用tagsinput库时如何去除<input>标签内的边框？

我的问题如下：

我的参考：tagsinput bootstrap

我尝试过但没有解决的问题：

1. .bootstrap-tagsinput:focus { outline: none !important; }
2. input:focus, textarea:focus, select:focus { outline: none; }

代码：

<div class="form-group row">
    <div class="col-lg-4 col-sm-4">
        <label class="col-form-label">IP Address Whitelist</label>
    </div>
    <div class="col-lg-8 col-sm-8">
        <input type="text" class="form-control tagsinput" id="addTokenIP" data-role="tagsinput">
        <code>Note: Please press "Enter" for every single IP entered.</code>
    </div>
</div>

$('.tagsinput').tagsinput({
    tagClass: 'badge badge-dark'
});

Answer 1

最后，经过反复尝试，我通过应用这种风格找到了答案。

.bootstrap-tagsinput > input:focus{
  outline: none !important;
}

Answer 2

要覆盖所有主流浏览器，试试这个。

.bootstrap-tagsinput {
    border: 0;
    border: none;
    outline:0;
    outline:none;
    box-shadow: none;
    border-width: 0px;
    appearance: none;
    -webkit-appearance: none;

}
input:focus {
    outline:none;
}