如何自定义 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;
}