如何通过CSS借助ID选择器修改指定ng-select组件的宽度

你当前使用的ng-select模板代码（已修正原代码属性间缺空格的语法问题）：

<ng-select 
  id="province" 
  (keyup)="this.userData.onKeyUp3($event)" 
  [ngModel]="selectedOneSubDistrict3" 
  (ngModelChange)="onChangez3($event)" 
  formControlName="province3"
>
  <ng-option 
    *ngFor="let item of this.userData.residenceList" 
    [value]="item.residenceList+'/'+item.regionId"
  >
    {{item.residenceList}}
  </ng-option>
</ng-select>

注意：原始代码中*ngFor属性的闭合引号后直接拼接了[value]属性，缺少空格分隔，会触发Angular模板解析错误，使用时需要补上。

针对这个id为province的组件，有三种常用的宽度调整方案，按需选择即可： #

方案1：直接设置宿主元素宽度（推荐，最简洁） #

ng-select本身是行内块级元素，你已经给它加了唯一id，直接在对应组件的CSS/SCSS/LESS文件里通过id选择器设置宽度即可，不需要样式穿透就能生效：

/* 仅作用于id为province的ng-select，不会影响其他同类型组件 */
#province {
  /* 按需替换宽度值：固定像素、百分比、rem、vw等单位都支持 */
  width: 320px;
  /* 如果需要占满父容器宽度，直接设置 width: 100% 即可 */
}

这个写法只会匹配当前你加了id的组件，不会全局污染其他ng-select样式。 #

方案2：同步适配下拉面板宽度 #

如果设置完宿主宽度后，弹出的选项下拉面板和输入框宽度不一致，需要用::ng-deep做样式穿透，调整组件内部封装的元素样式：

#province {
  width: 100%;
}
/* 穿透调整组件内部输入容器宽度 */
#province::ng-deep .ng-select-container {
  width: 100%;
}
/* 穿透调整下拉弹出面板宽度，覆盖组件内置样式时可加!important */
#province::ng-deep .ng-dropdown-panel {
  width: 100% !important;
}

方案3：行内样式快速设置（临时调试/简单场景用） #

如果只是临时调整、不想单独写CSS规则，直接在ng-select标签上加style行内属性即可：

<ng-select 
  id="province" 
  style="width: 280px"
  (keyup)="this.userData.onKeyUp3($event)" 
  [ngModel]="selectedOneSubDistrict3" 
  (ngModelChange)="onChangez3($event)" 
  formControlName="province3"
>
  <!-- 选项内容不变 -->
</ng-select>

注意事项 #

• 不要直接给全局.ng-select类设置宽度，会导致项目里所有用到ng-select的组件样式被意外修改
• 用::ng-deep时前面必须带上#province作为命名空间，避免样式泄露到全局
• 如果需要做响应式宽度，直接在对应媒体查询里调整#province的width值即可

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