How to remove border inside input tag when using tagsinput library in jQuery?

Question

How to remove border inside <input> tag when using tagsinput library in jQuery?

My problem as below:

My reference: tagsinput bootstrap

Something I've tried but not solve:

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

Code:

<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

Finally, after try and error I found the answer by applying this style.

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

Answer 2

To cover all the major browsers, try this.

.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;
}