ng2-select 变漂亮的简单方法 css

Question

我在 angular2 应用程序中使用 ng2-select（我是 angular 的新手）。我正在尝试更改 ng2-select 的 css。当我查看我的对象时，我可以看到它 css 来自 bootstrap、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 盒子 - 类似于：不知道怎么得到

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

只需将您想要的样式添加到在 DOM 中声明的样式表中，该样式表位于当前对其设置样式的 CSS 之后——并且不要忘记至少匹配规则的特殊性当前已声明。

Answer 2

编辑： 我已经找到了一个更好的方法，比如 select-input 因为它是一个 input 你可以添加一个 id="" 到 HTML 元素并在 .css/.scss w/ 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
{
    ...
}

ng2-select 变漂亮的简单方法 css

ng2-select easy way to get nice css

css

angular2-directives

angular