css - 将 ui-select 样式替换为原始样式

Question

我在 http://www.jiyubi.com/#/tour_package/home 上有两个下拉菜单

左边的应用angular-ui-select/dist/select.min.css

但我想要合适的款式。

什么最快搞定？

因为看起来 angular-ui-select 会修改 DOM 元素。

我不知道哪种方法可以使左边的与右边的样式相同。

当前样式http://www.jiyubi.com/#/tour_package/home

这是想要的样式 http://52.196.210.40:3000/portal/package_home.html

谢谢

Answer 1

angular-ui-select 具有三个内置主题:

引自[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>

如果这些现成的样式不是从正确的框架中得到启发，或者不讨好你的眼睛，你总是可以制作你自己的关于 angular-ui-select 使用的类的 css，放置所需的样式并使用 !important使用 css 定义覆盖原件。

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

---

我的来源:

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