ng2-select 获得漂亮 CSS 的简单方法

Question

我在 angular2 应用程序中使用 ng2-select（我是 angular 新手）。 我正在尝试更改 ng2-select 的 css。 当我查看我的对象时，我可以看到它的 css 来自引导程序、ng-select css 等等，我可以看到 ng-select 指令是从以下内容构建的：

<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open" tabindex="0">
<div></div>
<span class="ui-select-match">
    <!--template bindings={}-->
</span>
<input autocapitalize="off" autocomplete="false" autocorrect="off" class="ui-select-search input-xs" role="combobox" spellcheck="false" type="text" placeholder="Choose Modifiers">

<!--template bindings={}-->

<!--template bindings={}-->

但我想要一个不错的选择框 - 例如： 不知道怎么弄

select {
    font-size: 15px;
    border: 1px solid lightblue;
    border-radius: 10px;
    color: black;
    padding: 8px;
    width: 120px;
    -webkit-appearance: none;

    background-color: lightblue;
    background-transparency: 0.5;
    background-position: right 15px top 22px;
    background-size: 18px 18px;
    margin-left :20px;
    margin-top: 8px;
} 

Answer 1

编辑：我后来找到了一个更好的方法，比如select-input，因为它是一个input，你可以在 HTML 元素中添加一个id="" 并在.css/.scss 带input#id { }。比:host /deep/ 干净得多。这适用于 kendo-maskedtextbox 等包装控件。

在这种情况下，选择的答案不是很有用；我尝试了这种方式，但没有成功。

在进行更多研究时，我发现了Component Style guide，它使用:host 和/deep/ 属性以及组件CSS 类来为样式提供适当的深度曝光。

我最终使用这三个类来设置 ng2-select 的样式：

:host /deep/ .btn-secondary, 
:host /deep/ .ui-select-choices,
:host /deep/ .ui-select-search
{
    ...
}

Answer 2

只需将您想要的样式添加到在 DOM 中声明的样式表中，在当前样式的 CSS 之后 - 不要忘记至少匹配当前声明的规则的特异性。