ng2-cssを簡単に取得

Question

私はangular2アプリケーションでng2-selectを使用しています（私は新しい角度です）。 ng2-selectの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={}--> 

が、私がしたい：私は私のオブジェクト上で見てみると 私は、CSSは、ブートストラップ、NG-選択CSSから来ているとより多くの私はNG-選択ディレクティブがから構築されていることを確認することができ、それを見ることができます素敵なセレクトボックス取得する - のようなもの： をし、それが

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

ただ、現在、それをスタイリングされたCSSの後にDOMに宣言されているあなたのスタイルシートにしたいスタイルを追加取得する方法がわかりません - 少なくともスペックにマッチすることを忘れないでください現在宣言されているルールのificity。

Answer 2

編集：私はより良い方法を見つけたので、それはあなたがHTML要素にid=""を追加し、input#id { }/wの.css/.scssでそれを参照することができinputであることから、select-inputのために言います。 :host /deep/よりはるかにクリーンです。これは、kendo-maskedtextboxなどのラップされたコントロールで動作します。

この場合、選択した回答はあまり役に立ちません。私はそのようにして、どこにも行きませんでした。

私は:hostと/deep/という属性をCSSのクラスの横に使用して、スタイリングに適切な深さの露出を与えるComponent Style guideを見つけました。

私は、スタイルNG2-選択するために、これらの三つのクラスを使用して終了：

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