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

Posted 2023-02-22

【中文标题】ng2-select 获得漂亮 CSS 的简单方法

【英文标题】：ng2-select easy way to get nice css

【发布时间】：2016-08-18 23:40:06

【问题描述】：

我在 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;
 

【参考方案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

    ...

【参考方案2】：

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

【讨论】：

谢谢，我做到了，而且有点用。问题是 ng2-select 是由很多东西构建的，并且多选和单选是不同的。如果有人有一个不错的 css 可以分享，那就太好了，如果没有，我会在它稳定后分享我的 css。

您似乎想要一些超出问题范围的相当具体的东西。如果我的回答对你有用，请将答案标记为正确。

抱歉，您的回答是正确的，并且非常有帮助，我已尝试将其标记为正确，但我没有足够的声誉......一旦我有足够的声誉，我保证会标记它。再次感谢

一切都好。乐意效劳。尽可能不要忘记将其标记为正确；）