ng2-выберите простой способ получить хороший css

Я использую ng2-select в приложении angular2 (я новичок в angular). Я пытаюсь изменить css 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;
}
2 3
css angular2-directives

2 ответа:

Просто добавьте стили, которые вы хотите, в вашу таблицу стилей, которая объявлена в DOM после CSS, который в настоящее время ее стилизует-и не забудьте, по крайней мере, соответствовать специфике правил, которые в настоящее время объявлены.

1

EDIT: С тех пор я нашел лучший способ, скажем, для select-input, так как это input, Вы можете добавить id="" в HTML-элемент и ссылаться на него в .css/.scss w/ input#id { }. Гораздо чище, чем :host /deep/. Это работает с обернутыми элементами управления, такими как kendo-maskedtextbox и т. д.

Выбранный ответ не очень полезен в данном случае; я попробовал этот путь и ничего не добился.

Проводя дополнительные исследования, я наткнулся на руководство по компонентному стилю , которое использует :host и /deep/ атрибуты наряду с компоненты CSS классов, чтобы дать надлежащую глубину экспозиции для укладки.

В итоге я использовал эти три класса для стиля ng2-select: 

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