Question

我想在ng-multiselect-dropdown中更改CSS。

 <ng-multiselect-dropdown
                  [placeholder]="'Choose'"
                  [data]="dropdownList"
                  [(ngModel)]="selectedItems"
                  [settings]="dropdownSettings"
                  (onSelect)="onItemSelect($event)"
                  (onSelectAll)="onSelectAll($event)"
                   name="domain"

                  >
                </ng-multiselect-dropdown>

在调用html页面上的下拉菜单之前，我尝试添加以下内容，但这没有帮助。

<style>ng-multiselect-dropdown >.dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
         padding: 16px 10px;
         cursor: pointer;
         text-align: left;
 }

有人可以帮我吗？

Answer 1

尝试在组件的css文件中添加以下代码

::ng-deep .multiselect-dropdown .dropdown-btn{
    // add your own styles here. 
    // eg. min-height:5px;
}

Answer 2

您应该可以通过应用 ngClass 或 ngStyle 完成此操作。查看ngClass Documentation

Answer 3

您是否尝试过使用“ style.css”文件中的样式代码来关闭样式代码中的“>”选择器？

我试图寻找一个'ng-multiselect-dropdown'here的演示示例，我注意到在'ng-multiselect-dropdown'和'.dropdown-list之间还有另一个元素'，以蓝色突出显示。

如果代码中也包含此类元素，则应按以下方式更改样式代码：

ng-multiselect-dropdown .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
     padding: 16px 10px;
     cursor: pointer;
     text-align: left;
}

或者：

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
         padding: 16px 10px;
         cursor: pointer;
         text-align: left;
    }

因为如果使用选择器'>'，则规则将仅应用于类'.dropdown-list'紧接在'ng-multiselect-dropdown'元素之后的元素。
建议：
我建议您避免在样式规则（“ _ngcontent-c6”）中使用自动生成的角度代码。您的代码将更加清晰和可重用。

让我知道这是否是解决方案。

Answer 4

您必须在全局CSS文件中应用样式，例如site.css而不是组件css文件中。这是site.css中的示例：

  .multiselect-dropdown[_ngcontent-c3] .dropdown-btn[_ngcontent-c3] .selected-item[_ngcontent-c3] {
    margin-right: 4px;
    background: #fb4f4f !important;
    padding: 0 5px;
    color: #fff;
    border-radius: 2px;
    float: left;
}

Answer 5

虽然我已经很晚了，但对于那些仍在寻找解决方案的人来说仍然可以提供帮助我只是在组件中添加了自定义类，并使用了角形

/deep/

属性（尽管不建议使用，但您可以引用其他任何替代方法，例如：ng-host）

例如：

 <ng-multiselect-dropdown class="custom-asset-dropdown"
                    [placeholder]="'Select Asset'"
                    [data]="compareAssetGroup"
                    [(ngModel)]="selectedAssetGroup"
                    [settings]="multiSelectAssetSettings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                  >
 </ng-multiselect-dropdown>

您的CSS可以是：

/deep/ .custom-asset-dropdown{
/* hello make my css looks cool instead of default css*/
}

Answer 6

我是Angular的初学者，我今天开始。今天正在测试。我所做的是：

<ng-multiselect-dropdown
    [class]="'my-class'"

并在“我的班级”中定义您的风格

Answer 7

我也面临着同样的问题。我通过在全球范围内应用样式解决了该问题。这意味着在style.css中，而不是在您正在处理的任何组件CSS文件中。

因此转到角度的Style.css并添加所需的CSS属性，然后为class =“ container” 在Style.css中包含以下代码例如：

.container .multiselect-dropdown .dropdown-btn {
width: 200px!important; //include your code }

，并在您使用ng-multiselect下拉菜单的component.html文件中，包括此

 <ng-multiselect-dropdown

class="container"  //include this
[placeholder]="'Environment'"
[data]="envData"
[settings]="dropdownSettings"
(onSelect)="onEnvSelect($event)"


>

更改ng-multiselect-dropdown的CSS

7 个答案: