如何将自定义样式应用于 ui-select 动态创建的下拉对象?

Question

我正在开发一个使用AngularJS v1.5.8的单页应用程序。我正在尝试进行简单的视觉更改，但找不到该怎么做。

有一个从来自后端的列表填充的<ui-select>下拉对象。它工作正常，但我需要使下拉列表更大一点。我一直在尝试将 CSS 类分配给生成的下拉列表，但没有成功。我应用于 ui-select 对象的样式似乎不适用于作为下拉列表本身的div。

ui-select 指令创建一个 ID 为 "ui-devtype-span" 的<span>。当我手动编辑此对象样式(如在Chrome开发人员工具中)时，我得到了所需的结果。但是这个 span 对象在我的代码中不存在。它似乎是动态生成的，它不会从 ui-select 继承样式。主题是"引导">

<ui-select theme="bootstrap"
ng-model="..."
on-select="..."
ng-disabled="..."
append-to-body="true">
<ui-select-match allow-clear="" >
<span >
{{$select.selected.name}}
</span>
</ui-select-match>
<ui-select-choices
repeat="group in ...
| orderBy: 'name'
| filter: $select.search">
<span ng-bind-html="group.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>

我尝试将我的 css 类添加到此片段中的每个 HTML 标签中，但我无法将动态生成的<span>设置为 45px 高。我无法以更广泛的方式更改指令样式，因为它在应用程序中的其他地方使用，并且我的更改应仅适用于此屏幕。

Answer 1

我无法以更广泛的方式更改指令样式，因为它在应用程序的其他地方使用，

然后给指令一个id。

<ui-select id="select1" theme="bootstrap" ng-model="..."

而我们是一个后代组合器

<style>
#select1 span {
font-size: 20px;
}
</style>

或添加自定义类：

<ui-select class="my-select" theme="bootstrap" ng-model="..."
<style>
.my-select span {
font-size: 20px;
}
</style>