replace ui-select style to original style

Question

I have two dropdown menus on http://www.jiyubi.com/#/tour_package/home

The left one is applied angular-ui-select/dist/select.min.css

But I'd like the right one style.

What is the quickest get it?

Because it seems angular-ui-select will modify the DOM element.

I don't know which approach can make the left one has the same style as the right one.

Current style http://www.jiyubi.com/#/tour_package/home

This is desired style http://52.196.210.40:3000/portal/package_home.html

Thanks

Answer 1

angular-ui-select has three built in themes:

quote from [1]:

ui-select has the following themes:

• bootstrap inspired from the popular bootstrap framework.
• select2 inspired from select2 jQuery widget
• selectize inspired from selectize jQuery widget

Themes can be set at a global level using a provider:

var app = angular.module('app', ['ui.select']);

app.config(function(uiSelectConfig) {
   uiSelectConfig.theme = 'bootstrap';
});

or as a property on the select element like:

<ui-select ng-model="animal.id" theme="bootstrap">
    ...
</ui-select>

If these ready made styles aren't either inspired of correct framework or otherwise do not please your eye, you can always make your own css about the classes that angular-ui-select uses, place there desired style and use !important with the css definitions to overwrite the originals.

.style.not.pleasing.eye {
    something: sth_new !important;
}

---

My sources:

[1] https://github.com/angular-ui/ui-select/wiki/ui-select