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