Question

我在angular2应用程序中使用ng2-select（我是角度新手）。我正在尝试更改ng2-select的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 {
    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你可以添加id=""到.css/.scss HTML元素并在input#id { } w / :host /deep/中引用它。比kendo-maskedtextbox更清洁。这适用于包裹的控件，如:host等。

在这种情况下，所选择的答案并不是非常有用;我试着这样，无处可去。

我做了更多研究Component Style guide，它使用/deep/和:host /deep/ .btn-secondary, :host /deep/ .ui-select-choices, :host /deep/ .ui-select-search { ... }属性以及组件CSS类来为样式提供适当的深度曝光。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body> 
                your code ....
</body>
</html>

Answer 2

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

ng2-选择简单的方法来获得漂亮的CSS

2 个答案: