Angular 10：为disabled状态的select元素匹配input的禁用样式

问题场景 #

在Angular 10应用中，通过FormControl为部分表单字段设置了disabled属性，功能正常，但select类型元素并未像input字段那样显示禁用背景样式，需要让select应用与input相同的禁用背景样式。

相关代码 #

HTML代码

<div class="c-input"
     [ngClass]="{'error' : form.controls.birthDate.invalid && form.controls.birthDate.touched}">
  <input [attr.aria-label]="page + '.birthDate' | translate" [type]="isBrowserOldSafari() ? 'text' : 'date'"
         name="birthDate" id="birthDate"
         placeholder="{{ page + '.birthDate' | translate }} {{ isBrowserOldSafari() ? '(JJ/MM/AAAA)' : '' }}"
         [class.js-date-placeholder]="!isBrowserOldSafari()" required formControlName="birthDate">
  <label for="birthDate">{{ page + '.birthDate' | translate }} {{ isBrowserOldSafari() ? '(JJ/MM/AAAA)' : '' }}
    <span class="c-input__mandatory">*</span></label>
  <span
    class="c-input__error">{{ (birthDateError === "") ? ('error.required' | translate) : (birthDateError) }}</span>
</div>

   <!-- Profession -->
    <div class="c-input c-select"
         [ngClass]="{'error' : form.controls.profession.invalid && form.controls.profession.touched}">
      <select [attr.aria-label]="page + '.profession' | translate" required formControlName="profession">
        <option value="" selected>{{ page + '.profession' | translate }}<span class="c-input__mandatory">*</span>
        </option>
        <option *ngFor="let profession of professions"
                [value]="profession.identifiant">{{ profession.libelle }}</option>
      </select>
      <span class="c-input__error">{{ 'error.required' | translate }}</span>
    </div>

    <!-- Specialty -->
    <div class="c-input c-select"
         [ngClass]="{'error' : form.controls.specialty.invalid && form.controls.specialty.touched}"
         *ngIf="showSpecialtiesDropdown">
      <select [attr.aria-label]="page + '.specialty' | translate" required formControlName="specialty">
        <option value="" selected>{{ page + '.specialty' | translate }}<span class="c-input__mandatory">*</span>
        </option>
        <option *ngFor="let specialty of specialties"
                [value]="specialty.identifiant">{{ specialty.libelle }}</option>
      </select>
      <span class="c-input__error">{{ 'error.required' | translate }}</span>
    </div>

TS表单代码

protected buildForm(): void {
  this.form = this.formBuilder.group({
    // birthdate
      birthDate: [{value: '', disabled: true}, [Validators.required]],
      // select
      profession: [{value: '', disabled: true}, [Validators.required]],
      specialty: [{value: '', disabled: true}, [Validators.required]],
  });
}

解决方案 #

问题根源是浏览器对select:disabled的默认样式与input:disabled不一致，需要自定义CSS统一样式，可通过以下方式实现：

• 复用已有input禁用样式
  如果项目中已有针对.c-input input:disabled的禁用样式，直接将select加入选择器，共享相同样式：

.c-input input:disabled,
.c-input.c-select select:disabled {
  /* 复制input禁用的背景及相关样式，示例： */
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 1;
  color: #6c757d;
}

• 提升样式优先级
  若浏览器默认样式优先级更高，可通过增加选择器权重覆盖，避免滥用!important：

.c-input.c-select select:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
  color: #6c757d;
  /* 若仍不生效，可临时使用!important（优先调整选择器权重） */
  /* background-color: #e9ecef !important; */
}

• 利用Angular表单状态类
  Angular响应式表单会自动为禁用的控件添加ng-disabled类，也可基于此类编写样式：

.c-input.c-select select.ng-disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

• 排查样式覆盖问题
  使用浏览器开发者工具（F12）检查select元素的样式规则，确认是否有其他CSS规则覆盖了禁用样式，调整选择器权重即可解决冲突。

内容的提问来源于stack exchange，提问作者Olivier