如何自定义 jquery select2 插件 - jQuery 替代 select 框

Question

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

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

注意：我正在使用 AngularJs 并为 select2 link 创建了一个指令，所以：

.

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

如何自定义 jquery select2 插件 - jQuery 替代 select 框

How to customize jquery select2 plugin - The jQuery replacement for select boxes

javascript

css

angularjs

jquery-select2