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（）而不是十六进制的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>

角反应式下拉菜单的<option>标签透明

1 个答案: