ng2-選擇簡單的方法來獲得很好的css

我在angular2應用程序中使用ng2-select（我是新的angular）。我想改變ng2選擇的CSS。當我看着我的對象上我可以看到它的CSS從引導，NG-選擇CSS來了，我還能看到NG-選擇指令從建：ng2-選擇簡單的方法來獲得很好的css

<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; 
}

來源

2016-04-25 Noa

你想要的款式只需添加到您的樣式表，在當前樣式它CSS後的DOM聲明 - 並且不要忘記至少符合規格目前宣佈的規則的現狀。

來源

2016-04-25 14:57:26 Pytth

謝謝，我做到了，它種工作。問題在於，ng2-select是由許多東西構建而成的，多選和單選不同。如果任何人有一個很好的CSS分享它將是偉大的，如果不是我會分享我的CSS一旦穩定。 – Noa

看來你想要的東西相當具體，超出了問題的範圍。如果我的答案適合您，請將答案標爲正確。 – Pytth

對不起，你的回答是正確的，非常有幫助，我已經試圖標記它是正確的，但我沒有足夠的聲譽......一旦我有足夠的保證，我保證將其標記。再次感謝 – Noa

編輯：因爲我已經找到了一個更好的辦法，比方說在select-input因爲它是一個input你可以添加一個id="" HTML元素和引用它在.css/.scss瓦特/ input#id { }。比:host /deep/清潔得多。這適用於包裝控件，如kendo-maskedtextbox等。

所選答案在這種情況下不是很有用;我嘗試了這種方式，並沒有得到。

做了更多的研究，我碰到了Component Style guide，它使用:host和/deep/屬性以及組件CSS類來給出適當的樣式深度曝光。

最後我用這三個類風格NG2選：

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

來源

2017-05-25 14:44:01 Milo

ng2-選擇簡單的方法來獲得很好的css

回答

相關問題