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

Question

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

请看下面的图片，用红色圈出，是选择框的select2替代品。我想更改边框样式，使其看起来与页面上的其他文本框类似。

注意：我使用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;
}