mdb select and datepicker border color

@Arkadiusz Idzikowski I want to change the border, text, down arrow to orange color on only one view since i have dark background, this styles should not effect the other pages.

HTML

<mdb-form-control class="form-white">
                                            <mdb-select class="white-color">
                                                <mdb-option *ngFor="let option of recentSS" [value]="option.value">
                                                    {{
                                                    option.label
                                                    }}</mdb-option>
                                            </mdb-select>
                                            <label mdbLabel class="form-label white-text">Total UPC</label>
                                        </mdb-form-control>

TC

recentPo = [ { value: '1', label: 'abd' }, { value: '2', label: 'defg' }, { value: '3', label: 'ngjk' }, 

SCSS

  .white-color {
  background: map-get($colors, color-dashBlue);
  font-size: 1.2rem;
  color: map-get($colors, color-white);
  font-weight: map-get($fontStyle, medium);
  letter-spacing: 2px;
}

.white-text {
  color: map-get($colors, color-white);
  letter-spacing: 1px;
}

@SourceCorrect1 Please try to remove the form-white class and use these styles:

.custom-select .form-control {
  color: #fff;
}

.custom-select .select.focused .select-arrow {
  color: #fff;
}

.custom-select .select:focus .select-arrow {
  color: #fff;
}

.custom-select .select-arrow {
  color: #fff;
}

.custom-select .select-clear-btn {
  color: #fff;
}

.custom-select .select {
  & ~ .form-label {
    color: #fff;
  }

  ~ .form-notch {
    div {
      border-color: #bdbdbd;
    }
  }
}

.custom-select .select.focused {
  & ~ .form-notch .form-notch-leading {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transition: all 0.2s linear;
  }

  & ~ .form-notch .form-notch-middle {
    border-bottom: 2px solid;
    border-color: #fff;
    transition: all 0.2s linear;
  }

  & ~ .form-notch .form-notch-trailing {
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #fff;
    transition: all 0.2s linear;
  }
}

.custom-datepicker {
  .form-control {
    color: #fff;
    ~ .form-label {
      color: #fff;
    }
    ~ .form-notch {
      div {
        border-color: #bdbdbd;
      }
    }
    &:focus ~ .form-label {
      color: #fff;
    }
    &:focus ~ .form-notch .form-notch-middle {
      border-color: #fff;
    }
    &:focus ~ .form-notch .form-notch-leading {
      border-top: 0.125rem solid #fff;
      border-bottom: 0.125rem solid #fff;
      border-left: 0.125rem solid #fff;
    }
    &:focus ~ .form-notch .form-notch-trailing {
      border-color: #fff;
    }
  }

  .datepicker-toggle-icon {
    color: #fff;
  }
}

We will take a closer look at the colors applied by the form-white class because it looks like currently it is not replacing all the necessary colors.