Блог

Главная - Вопросы по программированию - как изменить цвет границы компонента ng-select на красный?

как изменить цвет границы компонента ng-select на красный?

#angular #css #bootstrap-4 #angular-ngselect

#angular #css #bootstrap-4 #angular-ngselect

Вопрос:

Компонент select в моем шаблоне angular html отображается нормально. Однако я хочу отобразить этот компонент с красной рамкой, в настоящее время он отображается серым цветом. Я не могу этого добиться.

Я использую Angular 5

 <ng-select class="custom" [searchable]="true" formControlName="contactList" [items]="contactLists" 
     bindLabel="name" 
     placeholder="{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}" [compareWith]="compareResource">
</ng-select>

пользовательский CSS определен в файле и выглядит следующим образом

 .ng-select.custom {
    min-height: 0px;
    max-width: 350px;
}
.ng-select.dropdown {
    border: 1px solid black;
}

Комментарии:

1. вы пробовали добавить флаг: !important в css??

2. не могли бы вы рассказать немного больше, пожалуйста. где следует разместить !важно.. Спасибо

3. вы должны разместить !важно вот так: .ng-select.custom { минимальная высота: 0 пикселей !важно; максимальная ширина: 350 пикселей!важно; } .ng-select.dropdown { граница: 1 пиксель сплошного красного цвета!важно; } кстати, я изменил вашу последнюю строку с «сплошного черного» на «сплошной красный», потому что вы просили красный цвет.

4. Можете ли вы поделиться рабочей скрипкой? Спасибо

5. @prasanth вы можете использовать хороший веб под названием: stackblitz. Который обеспечивает простой способ поделиться вашим кодом.

Ответ №1:

То, что вы, вероятно, ищете, называется ::ng-deep *. проверьте документацию для получения дополнительной информации. * имейте в виду, что на данный момент он находится в устаревшем состоянии.

 ::ng-deep .ng-select.custom {
        min-height: 0px;
        max-width: 350px;
}

::ng-deep .ng-select.dropdown {
    border: 1px solid black;
}

Ответ №2:

Вы также можете переопределить переменную SCSS в вашем styles.scss

 $ng-select-highlight: #6200ee !default;
@import "~@ng-select/ng-select/scss/material.theme";

Ответ №3:

Я думаю, что проблема связана с angular viewencapsulation и спецификацией браузера css. Я также видел, что вы используете border: 1px solid black; , а не красный, как вы упомянули в вопросе.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://dzone.com/articles/what-is-viewencapsulation-in-angular

Ответ №4:

В вашем css вы ориентируетесь на «.ng-select», вы пытались настроить таргетинг на него как на элемент, а не на класс?

  ng-select.custom {
     min-height: 0px;
     max-width: 350px;
 }

 ng-select.dropdown {
     border: 1px solid black;
 }

Ответ №5:

 <ng-multiselect-dropdown #multiSelect [placeholder]="'Select Service'" [settings]="dropdownSettings" class="custom-dropdown"
  [data]="dropdownList">
</ng-multiselect-dropdown>

Укажите пользовательский класс, например, custom-dropdown, а затем в ваших styles.scss переопределите его, например

 .custom-dropdown .multiselect-dropdown {
    position: relative;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #757575 !important;
    font-family: "Gilroy-SemiBold", "Arial", serif !important;
    .dropdown-btn {
        border: 1px solid #red !important;
    }
}

Ответ №6:

добавьте этот стиль в файл css / scss вашего компонента. получить дополнительную информацию

 /* 
    go red when touched when touched
*/

/* Border Color */
.ng-select.ng-invalid.ng-touched .ng-select-container{
    border-color: red;
}

/* Arrow Color */
.ng-select.ng-invalid.ng-touched .ng-arrow-wrapper .ng-arrow{
    border-color: red transparent transparent
}
/* Placeholder Color */
.ng-select.ng-invalid.ng-touched .ng-select-container .ng-placeholder{
    color: red;
}