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

Question

I am looking for a way to customize the appearance of Select2 in a project. Have looked in the documentation but could not find any specific instruction on how to change the style of the select box.

Kindly see the image below, circled in red, is a select2 replacement for select box. I will like to change the border style and make it look similar to the other text boxes on the page.

NB: Am using AngularJs and have created a directive for select2 link so:

.

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

Here is the HTML code:

<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

I guess it should be possible to simply overwrite the existing CSS rules.

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