Раскрывающийся список угловых реактивных форм в прозрачности для тега <option>

Question

Я работаю над угловым проектом 8.

Я хочу сделать так, чтобы выпадающий список реактивных форм был частично прозрачным.

Вот что я получил до сих пор.

очевидно, это самая легкая часть.

я хочу, чтобы выбор был на одном и том же слегка прозрачном фоне вместо непрозрачного белого:

body{
  background-image: linear-gradient(to top, rgb(45, 173, 108) 0%, rgba(227, 253, 200, 0.9));
}

  .custom-select{
    background-color: rgba(128, 128, 128, 0.16);
  }
  // this either does nothing or removes it's own alpha value, inconsistently
  // both behaviors aren't desired.
  option{
    background-color: rgba(128, 128, 128, 0.16) !important;
  }

  <form [formGroup]="statusForm">
    <div>
      <div class="text-label">Topic :</div>
      <select class="custom-select" (change)="onStatusChosen($event)" formControlName="status">
        <option value="Delivered">Delivered</option>
        <option value="Cancelled">Cancelled</option>
        <option value="UndeliveredTechnicalissue">Undelivered/Technical issue</option>
      </select>
    </div>
  </form>

добавление стиля к тегу опции даже с флагом !important не делает этого.

Я также пробовал -webkit-appearance: none !important;без лучших результатов.

Я использую последнюю версию Chrome, в идеале это решение будет работать и под краемдругие браузеры не должны поддерживаться.

Answer 1

установите параметр фона, как показано ниже:

не используйте #rrggbbaa шестнадцатеричную цветовую нотацию, пока она не очень хорошо поддерживается.

для прозрачности используйте rgba () вместо hex 8цифра.

body{
  background: lightblue;
}

.custom-select1, .custom-select2{
  background-color: #80808029;
}

.custom-select1 option {
  background-color: rgba(51,51,255,0.2) !important;
}

.custom-select2 option {
  background-color: rgba(51,51,255) !important;
}

  <form [formGroup]="statusForm">
    <div>
      <div class="text-label">Topic : Transparent</div>
      <select class="custom-select1" (change)="onStatusChosen($event)" formControlName="status">
        <option value="Delivered">Delivered</option>
        <option value="Cancelled">Cancelled</option>
        <option value="UndeliveredTechnicalissue">Undelivered/Technical issue</option>
      </select>

      <div class="text-label">Topic : Not Transparent</div>
      <select class="custom-select2" (change)="onStatusChosen($event)" formControlName="status">
        <option value="Delivered">Delivered</option>
        <option value="Cancelled">Cancelled</option>
        <option value="UndeliveredTechnicalissue">Undelivered/Technical issue</option>
      </select>
    </div>
  </form>