javascript - 如何自定义 jquery select2 插件 - 选择框的 jQuery 替代品

Question

我正在寻找一种自定义 Select2 外观的方法在一个元素中。查看了文档，但找不到任何关于如何更改选择框样式的具体说明。

请看下图，红圈圈出的是select2替代select box。我想更改边框样式，使其看起来与页面上的其他文本框相似。

注意:我正在使用 AngularJs 并为 select2 链接创建了一个指令，因此:

.

directive('select2', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                element.select2({
                    allowClear: true,
                    width: 'resolve'
                });
            }
        };
    });

这是 HTML 代码:

<select select2 class="form-control" ng-model="select2" style="width:100%;">
                <option value="one">First</option>
                <option value="two">Second</option>
                <option value="three">Third</option>
            </select>

Answer 1

我想应该可以简单地覆盖现有的 CSS 规则。

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa; //change the border here
  border-radius: 4px;
}