如何将 ng-select 组件的边框颜色更改为红色？答案

【问题标题】：how to change the border colour of ng-select component to red?如何将 ng-select 组件的边框颜色更改为红色？
【发布时间】：2022-04-22 20:46:27
【问题描述】：

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

【问题讨论】：

您是否尝试过在 css 中添加：!important 标志？？
请您详细说明一下。应该在哪里放置 !important.. 谢谢
你应该像这样放置 !important： .ng-select.custom { min-height: 0px !important;最大宽度：350 像素！重要； } .ng-select.dropdown { 边框：1px 纯红色！重要； } 顺便说一句，我把你最后一行从“纯黑色”改为“纯红色”，因为你要求的是红色。
你能分享一下工作小提琴吗？谢谢
@prasanth 你可以使用一个不错的网站：stackblitz。这提供了一种共享代码的简单方法。

标签： angular css bootstrap-4 angular-ngselect

【解决方案1】：

您可能正在寻找的是::ng-deep*。查看documentation 了解更多详情。 *请注意，它目前处于弃用状态。

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

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

【讨论】：

【解决方案2】：

您也可以在您的styles.scss 中覆盖SCSS 变量

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

【讨论】：

【解决方案3】：

我认为是角度视图封装和浏览器 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 文件中。 get more info

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

【讨论】：