Html 如何使用Angular4中的Scss将样式设置为ng选择框_Html_Css_Angular

Html 如何使用Angular4中的Scss将样式设置为ng选择框

html css angular

Html 如何使用Angular4中的Scss将样式设置为ng选择框,html,css,angular,Html,Css,Angular,我的HTML中有一个ng select字段，我想应用css的某些部分，在这里我使用的是scss，我不知道如何将这些代码交叉到我给出的类中，有人能帮我整理一下吗 Scss: .box { background-color: #4389a9; width: 185px; height: 45px; padding: 8px 20px; right: -19px; cursor: pointer; top: 19px; transition: bottom 2s;

我的HTML中有一个ng select字段，我想应用css的某些部分，在这里我使用的是scss，我不知道如何将这些代码交叉到我给出的类中，有人能帮我整理一下吗

Scss:

.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>

HTML:

.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>

注意：

.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>

如果您使用的是angular cli，那么如果您添加组件SCS
文件，它将无法工作。要使其正常工作，请将它们添加到

样式中
这是您需要的SCS，
ng-select {
    >div {
        >div.single {
            >div.toggle {
                color: white !important;
                background: none;
                &:hover {
                    background-color: #4389a9;
                }
            }
            >div.placeholder {
                color: white;
                font-size: 35px;
                font-family: MontserratRegular;
            }
            >div.clear {
                &:hover {
                    background-color: #4389a9;
                }
            }
        }
        border: none !important;
    }
}
select-dropdown {
    display: none;
}

假设我们要更改外观轮廓的样式：

我们可以将css覆盖为：
.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>

ng选择标签：
.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>



注意：适用于“@ng select/ng select”：“^5.0.4”
如果我将其添加到组件SCS中，为什么它不起作用？因为根据angular cli的代码结构
，styles.scss
覆盖组件级或插件级中给定的所有样式。@Duncan，因为组件封装